我有一个对象数组,其中有两个嵌套对象。结构如下。我有监视函数来观察extraCurricular嵌套对象的任何更新或推送或删除。但这些功能只触发一次。我对这些手表功能没有任何停止功能。所以我没有阻止它们。请让我知道我错在哪里
$ scope.class.student.extraCurriculars = { 游戏:[{ 名称:'排球', teamCount:10 },{ 名称:'国际象棋', teamCount:2 }], 艺术:[{ 舞蹈:{ 类型:'Bharatham', teamCount:'1' }, 音乐:{ 类型:'Carnatic', teamCount:'1' }] } }
每个学生可以参加多场比赛,不止一种艺术。
**studentExtraCurriculum.html**
<div class="ui raised blue segment">
<div class="ui accordion" ng-repeat="game in class.student[curSection - 1].extraCurriculars.games">
<div class="title">
<div class="ui green label">{{$index+1}}</div>
<select ng-model="game.name" ng-options="game as game.name for game in gamesList">
<option value="">{{gamesList.game.name}}</option>
</select>
<input type="text" size="3" placeholder="Team count" ng-model="game.teamCount "></input>
</div>
</div>
</div>
<div class="ui small button" ng-click="pushGames()">Add a Game</div>
<div class="ui raised blue segment">
<div class="ui accordion" ng-repeat="art in class.student[curSection - 1].extraCurriculars.arts">
<div class="title">
<div class="ui green label">{{$index+1}}</div>
<select ng-model="art.name" ng-options="art as art.name for game in artList">
<option value="">{{artList.art.name}}</option>
</select>
<input type="text" size="3" placeholder="Team count" ng-model="art.teamCount "></input>
</div>
</div>
</div>
<div class="ui small button" ng-click="pushArts()">Add a Art</div>
MyController.js
var extraCurriculumController = function($scope, $log, StudentService, $stateParams, ClassService, Modal, $compile, $window) {
function {
...
}
function {
...,
}
function _init(){
...
//Inside Init I have added watch functions
$scope.$watchCollection(
"class.student[curSection - 1].extraCurriculars",
function(newValue, oldValue) {
console.log("Deep change bat");
console.log("Old value");
console.log(oldValue);
console.log("New Value");
console.log(newValue);
}
);
$scope.$watchCollection(
"class.student[curSection - 1].extraCurriculars",
function(newValue, oldValue) {
console.log("Deep change bowl");
console.log("Old value");
console.log(oldValue);
console.log("New Value");
console.log(newValue);
}
);
//watch for shallow change in array
$scope.$watch("class.student[curSection - 1].extraCurriculars",
function(newValue, oldValue) {
console.log("Shallow change bat");
console.log("Old value");
console.log(oldValue);
console.log("New Value");
console.log(newValue);
}
);
$scope.$watch("class.student[curSection - 1].extraCurriculars",
function(newValue, oldValue) {
console.log("Shallow change bowl");
console.log("Old value");
console.log(oldValue);
console.log("New Value");
console.log(newValue);
}
);
//deep change tree lookup
$scope.$watch("class.student[curSection - 1].extraCurriculars",
function(newValue, oldValue) {
console.log("tree change bat");
console.log("Old value");
console.log(oldValue);
console.log("New Value");
console.log(newValue);
},
true
);
$scope.$watch("class.student[curSection - 1].extraCurriculars",
function(newValue, oldValue) {
console.log("tree change bowl");
console.log("Old value");
console.log(oldValue);
console.log("New Value");
console.log(newValue);
},
true
);
//End of watch function
}
}