Question

我有这个按下按钮时激活的功能，它从数组中删除了一个对象：

$scope.remove = function (index) {
    //$scope.myPeople.splice(index, 1);
    $scope.myPeople.splice(index, 1);
    console.log($scope.myPeople);
}

在我的$scop.$watchGroup我有这个：

$scope.$watchGroup(['metric.value', 'startDate.value', 'endDate.value', 'myPeople', 'remove'], function () {
angular.forEach($scope.myPeople, function (key) {
   peopleArray = peopleArray.concat(key.screenName + ",");
});
   peopleArray = peopleArray.slice(0, -1);
   peopleArray = peopleArray.concat("}");
});

但出于某种原因，当我从列表中删除某些内容时，$watchGroup似乎没有听到它...

这是我在通话中使用的html代码，也许有帮助

＆＃13;

<a  ng-click="remove($index)"
value="{{person}}" type="button"style="color:red">
<i class="fa fa-times"></i></a>

＆＃13;

我仍然没有成功地尝试这个......

    $scope.$watchCollection('[myPeople]', function () {
    $scope.dataPie.length = 0;

    angular.forEach($scope.myPeople, function (value) {

        $scope.dataPie.push({
            "key": value.name,
            "y": value.followerCount
        });
    });

});

但是在调用此函数时它不会触发！

$scope.remove = function (index) {
    $scope.myPeople.splice(index, 1);
    $scope.apply;
}

任何线索？！？

Answer 1

您可以使用$watch第三个参数true和返回对象进行观看的自定义函数，例如

$scope.$watch(
    function(scope){
      return [scope.myPeople, $scope.$eval('metric.value')];
    }, 
    function() {
        ...
    },
    true
);

样品

var app = angular.module('plunker', []);

app.controller('ProfileController', function($scope) {

  $scope.myPeople = [{
    name: '1',
    followerCount: 1
  },
  {
    name: '2',
    followerCount: 2
  },
  {
    name: '3',
    followerCount: 3
  },
  {
    name: '4',
    followerCount: 4
  }];
  
  $scope.remove = function(index) {
    $scope.myPeople.splice(index, 1);
  };

  $scope.dataPie = [];
  
  $scope.$watch(
    function(scope){
      return [scope.myPeople, $scope.$eval('metric.value')];
    }, function() {
    $scope.dataPie.length = 0;
console.log("test");
    angular.forEach($scope.myPeople, function(value) {
      $scope.dataPie.push({
        "key": value.name,
        "y": value.followerCount
      });
    });

  },true);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="plunker" class="table-responsive" ng-controller="ProfileController">
    <table class="table table-striped">
      <thead>

      </thead>
      <tbody>
        <tr ng-repeat="person in myPeople | orderBy:predicate:reverse">
          <td><img class="img-rounded" ng-src="{{person.profileImageUrl}}"></td>
          <td>{{person.name}}</td>
          <td>
            <a ng-click="remove($index)" value="{{person}}" type="button" style="color:red">
              <i class="fa fa-times"></i>Remover</a>
            <br>
          </td>
        </tr>

      </tbody>
    </table>
    {{dataPie}}
<br><br>
    <label>
      <input type="radio" ng-model="metric.value" value="11"> valueOne <i class="fa fa-twitter"></i>
    </label>
    <br/>
    <label>
      <input type="radio" ng-model="metric.value" value="12"> valueTwo <i class="fa fa-twitter"></i>
    </label>
    <br/>
    <label>
      <input type="radio" ng-model="metric.value" value="13"> valueThree <i class="fa fa-twitter"></i>
    </label>

  </div>

Answer 2

watchGroup没有对数组内容进行深度扫描

您可能希望使用$watchCollection代替$watchGroup。

请参阅Angular Docs here。

数组是一个索引集合，也是一个对象，这就是$watchCollection可以使用的原因：

角色代码

$scope.remove = function(index) {
 $scope.myPeople.splice(index, 1);
};


$scope.$watchCollection('myPeople', function(newPeople, oldPeople) {
 console.log(newPeople);
});

这是一个显示代码实际操作的Plunker：Plunker

Answer 3

如果您更换

$scope.myPeople.splice(index, 1);

使用

$scope.myPeople = $scope.myPeople.slice(0).splice(index, 1);

您不需要额外的$ watch。

AngularJS中的函数没有调用$ WatchGroup

3 个答案: