1
只要學習Angular js。我試圖根據存儲在服務中的數組來更新表上的值。
我遇到的問題是，當運動控制器中變量$scope.names的範圍值發生變化時，html中的表格未更新。我100％肯定練習服務中的代碼正常工作，並且html中的角標記是正確的。我在下面的HTML頁面，控制器和服務中包含了我的代碼部分。
angular.module('howardsiteApp').controller('exerciseCtrl', function($scope, pageFooter, exerciseService) {
pageFooter.setfooterText('Exercise Tracker');
$scope.action = 'Add Exercise';
$scope.names = [];
$scope.days = [{
value: "Monday",
text: "Monday"
}, {
value: "Tuesday",
text: "Tuesday"
}, {
value: "Wednesday",
text: "Wednesday"
}, {
value: "Thursday",
text: "Thursday"
}, {
value: "Friday",
text: "Friday"
}];
$scope.getVal = function(item) {
var temp = exerciseService.getExercises(exerciseService.getDayIndex(item.value));
$scope.names = [];
for (var i = 0; i < temp.length; i++) {
//THIS IS THE VALUE I WANT DISPLAYED IN THE TABLE
$scope.names.push({
n: temp[i]
});
}
//I CAN SEE THE VALUE CHANGING BUT MY TABLE DOESN'T UPDATE \t \t
console.log($scope.names);
};
});
'use strict';
angular.module('howardsiteApp').service('exerciseService', function() {
var exerciseDays = [{
day: "Monday",
exercises: []
}, {
day: "Tuesday",
exercises: []
},
//DUMMY VALUES TO MAKE SURE THAT DATA WAS ACTUALLY BEING PASSED TO THE CONTROLLER
{
day: "Wednesday",
exercises: ["test"]
}, {
day: "Thursday",
exercises: ["this"]
}, {
day: "Friday",
exercises: []
}
];
return {
getDayIndex: function(key) {
for (var i = 0; i < exerciseDays.length; i++) {
if (exerciseDays[i].day === key) {
return i;
}
}
},
getExerciseIndex: function(index, key) {
for (var i = 0; i < exerciseDays[index].exercises.length; i++) {
if (exerciseDays[index].exercises[i] === key) {
return i;
}
}
},
addExercises: function(index, key) {
exerciseDays[index].exercises.push(key);
},
removeExercise: function(index, key) {
var temp = exerciseDays[index].exercises[(exerciseDays[index].exercises.length) - 1];
exerciseDays[index].exercises[key] = temp;
exerciseDays[index].exercises.length = exerciseDays[index].exercises.length - 1;
},
getExercises: function(key) {
return exerciseDays[key].exercises;
}
};
});<div id="viewOne">
<h1><b>Add Exercise</b></h1>
<h2><i>Select day</i> \t \t <select ng-model="daySelect" ng-controller="exerciseCtrl" ng-options="d.text for d in days" ng-change="getVal(daySelect)">
\t \t </select></h2>
<table class="table">
<tr>
<th class="text-center">Name</th>
<th class="text-center">Option</th>
</tr>
<tr data-ng-controller="exerciseCtrl" data-ng-repeat="name in names">
<td>{{name.n}}</td>
<td>
<button class="btnSubmit">Delete</button>
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="ex. pushup" />
</td>
<td>
<button class="btnSubmit">Add</button>
</td>
</tr>
</table>
</div>
謝謝！我刪除了html中額外的ng-controller標籤，並且解決了所有問題！我從來沒有想過額外的標籤會創建單獨的控制器實例。 –