javascript - 如何在 Angular js 中更新 $scope 值更改时的表值？

Question

刚刚学习 Angular js。我正在尝试根据服务内存储的数组更新表上的值。

我遇到的问题是，当练习 Controller 中变量 $scope.names 的范围值发生变化时，html 中的表格不会更新。我 100% 肯定练习服务中的代码可以正确运行，并且 html 中的 Angular 标签是正确的。我在下面包含了 html 页面、 Controller 和服务的代码部分。

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		
    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>		<select ng-model="daySelect" ng-controller="exerciseCtrl" ng-options="d.text for d in days" ng-change="getVal(daySelect)">
		</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>

Answer 1

所以我的 Angular 有点生锈，但是来自this和 this答案，似乎您正在创建 Controller 的两个实例。然后，第一个exerciseCtrl Controller 可能正在获取“getVal()”事件，更新其内部状态，而第二个exerciseCtrl仍然具有$scope.names的原始值...