更新AngularJS中ng-repeat表中的数组项

时间:2018-09-21 19:21:47

标签: angularjs json

我有一个AngularJS应用,可从JSON文件中提取数据。使用详细信息模板中的ng-repeat将部分数据添加到表中。当我选择第一个对象时,应该放入表中的数据可以正常工作。但是,当我单击另一个对象时,前一个对象的数据值会保留,而新选择的对象的数据值会添加到下面。

如何获取表中的值以仅在选择其对象时显示?我正在使用.push()方法插入值,因此我认为.slice()中的if statement可以解决,但到目前为止还算不上运气。

JS

pplApp.directive("peopleDetails", function(FindSearch) {
return {
restrict: 'E',
scope: {
  people: "=ngPeople"
},
templateUrl: 'ppl_details.html',
controller: function($scope, $element, $attrs, $templateCache, $rootScope, FindSearch) {
  $scope.likesAndDislikes = [];
  var results = [];
  var item;
  $scope.getNumber = function() {
    array = new Array($scope.people.rating)
    return array;
  }

  $scope.getLikesAndDislikes = function() {
    $scope.likeAndDislikes = [];
    results = [];

    $scope.people.Likes.forEach(function(value, key) {
      var insert = {
        'likes': value,
        'dislikes': $scope.people.Dislikes[key]
      };
      $scope.likesAndDislikes.push(insert);
    });
  }

  $scope.$watch('people', function() {
    $scope.getLikesAndDislikes();
  });
}
};
});

这是我在Plunker中的代码以获取完整图片。

1 个答案:

答案 0 :(得分:0)

这是因为您没有重置相同的likesAndDislikes数组模型变量。从peopleDetails指令将您的方法更新为:

$scope.getLikesAndDislikes = function() {
    $scope.likesAndDislikes = [];
    results = [];

    $scope.people.Likes.forEach(function(value, key) {
      var insert = {
        'likes': value,
        'dislikes': $scope.people.Dislikes[key]
      };
      $scope.likesAndDislikes.push(insert);
    });
}

我唯一更新的是重置数组变量名称:$scope.likesAndDislikes = [];您拼写和使用的是likeAndDislikes。

更新了plunker Example