Question

我遇到了$ watchCollection（）函数的麻烦。问题可能是我试图引用JSON文档的嵌套部分。我真的无法解决问题。

HTML

<div ng-app="MovieApp">
  <div ng-controller="FilterController as FilterCtrl" ng-init="FilterCtrl.init()">
    <ul ng-repeat="filter in filters">
      <b>{{filter.name}}</b>
      <li ng-repeat="element in filter.elements">
        <input type="checkbox" ng-model="element.ticked" />{{element.name}}
      </li>
    </ul>
  </div>
</div>

JS

var app = angular.module('MovieApp', []);

app.controller('FilterController', function($scope){
  this.init = function(){
    $scope.filters = jsonfilters;
  };

  $scope.$watchCollection('filters', function(newValue,oldValue){
    alert("A filter has been changed");
  });

});

var jsonfilters = [
{
  "name": "Genres",
  "elements": [
    {"name": "Adventure", "ticked": true},
    {"name": "Action", "ticked": true},
    {"name": "Fantasy", "ticked": true},
    {"name": "Science Fiction", "ticked": true},
    {"name": "Family", "ticked": true},
    {"name": "Thriller", "ticked": true},
    {"name": "Animation", "ticked": true},
    {"name": "Comedy", "ticked": true},
    {"name": "Drama", "ticked": true}
  ]
},
{   
  "name": "Companies",
  "elements": [
    {"name": "Warner Bros.", "ticked": true},
    {"name": "Walt Disney Pictures", "ticked": true},
    {"name": "Paramount Pictures", "ticked": true},
    {"name": "Columbia Pictures", "ticked": true},
    {"name": "DreamWorks Animation", "ticked": true},
    {"name": "Universal Pictures", "ticked": true},
    {"name": "Twentieth Century Fox Film Corporation", "ticked": true},
    {"name": "Legendary Pictures", "ticked": true},
    {"name": "Marvel Studios", "ticked": true},
    {"name": "Village Roadshow Pictures", "ticked": true},
    {"name": "Jerry Bruckheimer Films", "ticked": true}
  ]
}
];

我想要实现的是每次勾选/取消勾选其中一个复选框时能够调用函数。我做了一个jsfiddle来演示这个问题。

Answer 1

如果您不需要$watchCollection，我建议您避免使用ng-change。使用它需要很高的成本，除了你没有使用它。

请尝试使用某个事件让您知道更改的内容。

我使用<div ng-app="MovieApp"> <div ng-controller="FilterController as FilterCtrl" ng-init="FilterCtrl.init()"> <ul ng-repeat="filter in filters"> <b>{{filter.name}}</b> <li ng-repeat="element in filter.elements"> <input type="checkbox" ng-model="element.ticked" ng-change="filterChanged($event, element)" />{{element.name}} </li> </ul> </div> </div>指令知道用户何时点击了复选框。

HTML

var app = angular.module('MovieApp', []);

app.controller('FilterController', function($scope){
  this.init = function(){
    $scope.filters = jsonfilters;
  };

    $scope.filterChanged = function($event, element) {
    console.log('Filter changed:', element);
  }
});

var jsonfilters = [
  {
    "name": "Genres",
    "elements": [
      {"name": "Adventure", "ticked": true},
      {"name": "Action", "ticked": true},
      {"name": "Fantasy", "ticked": true},
      {"name": "Science Fiction", "ticked": true},
      {"name": "Family", "ticked": true},
      {"name": "Thriller", "ticked": true},
      {"name": "Animation", "ticked": true},
      {"name": "Comedy", "ticked": true},
      {"name": "Drama", "ticked": true}
    ]
  },
  { 
    "name": "Companies",
    "elements": [
      {"name": "Warner Bros.", "ticked": true},
      {"name": "Walt Disney Pictures", "ticked": true},
      {"name": "Paramount Pictures", "ticked": true},
      {"name": "Columbia Pictures", "ticked": true},
      {"name": "DreamWorks Animation", "ticked": true},
      {"name": "Universal Pictures", "ticked": true},
      {"name": "Twentieth Century Fox Film Corporation", "ticked": true},
      {"name": "Legendary Pictures", "ticked": true},
      {"name": "Marvel Studios", "ticked": true},
      {"name": "Village Roadshow Pictures", "ticked": true},
      {"name": "Jerry Bruckheimer Films", "ticked": true}
    ]
  }
];

JS

public static int getColumnIndex(Node n) {
    Integer i = GridPane.getColumnIndex(n);
    return i == null ? 0 : i;
}

public static int getRowIndex(Node n) {
    Integer i = GridPane.getRowIndex(n);
    return i == null ? 0 : i;
}

请在此处查看我的jsfiddle：https://jsfiddle.net/intervalia/5k7ehswt/2/

angularjs $ scope。$ watchCollection在嵌套的JSON文档上

1 个答案: