Блог

У меня есть массив объектов, в котором есть два вложенных объекта. Структура такая, как показано ниже. У меня есть функции просмотра для просмотра любого обновления, отправки или удаления внеклассных вложенных объектов. Но эти функции запускаются только один раз. У меня нет никакой функции остановки для этих функций просмотра.Поэтому я их не останавливаю. Пожалуйста, дайте мне знать, где я ошибаюсь

$scope.class.student.extraCurriculars = { игры: [{ название: ‘Volley Ball’, количество команд: 10 }, { название: ‘Chess’, количество команд: 2 }], искусство: [{ танец: { тип: ‘Bharatham’, количество команд: ‘1’}, музыка: { тип: ‘Carnatic’, количество команд: ‘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
}

}