0

我试图使用ng-repeat. 但是，现在我已经轻松完成了这一步，但我遇到了另一个问题。所以我试图访问和更新集合中的特定元素，但我真的不知道该怎么做。有谁知道如何做到这一点？或者可以指出我正确的方向？

这是一个小提琴样本： http: //jsfiddle.net/VNLPY/（实际上并没有做太多）

<body ng-app>
<div ng-init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]">
I have {{friends.length}} friends. They are:
<ul>
<li ng-repeat="friend in friends">
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
</div>
</body>

还有一件事，假设我拥有的数据是从 JSON 文件中提取的。现在如何访问集合中每一行的每个值，以及是否更新 JSON 对象中的特定行。界面会与更新的 JSON 同步吗？

谢谢

4

2 回答 2

1

这个小提琴有一个例子，通过一个表达式增加特定朋友的年龄，ng-click以及ng-click在一个简单的控制器中调用一个范围函数。

    <a href="" ng-click="friend.age = friend.age + 1">Age + 1</a>
    <a href="" ng-click="decrementAge(friend)">Age - 1</a>

控制器定义为：

function TestController ($scope) {
    $scope.decrementAge = function (friend) {
        friend.age = friend.age - 1;
    };
}

Angular 将处理保持模型和视图同步的问题。

于 2013-07-06T02:37:21.437 回答
1

您需要首先正确构建您的应用程序。Angular Seed是一个很好的起点。

一旦你有一个合适的控制器和视图，你就可以使用 $scope 来实现你所要求的。

未测试

控制器：

angular.module('myApp').controller('FriendsController', function($scope, $http) {
  $scope.doSomethingWithAFriend = function(friend) {
     // do something with your friend!
  }

  // $http is almost the same as jQuery.ajax except all the methods
  // return promises based on the $q (q.js) spec.
  $http.get('/api/friends').then(function(resp) {
    $scope.friends = resp.data;
  }, function(err) {
    console.log(err);
  });
});

看法

<li ng-repeat="friend in friends">
  [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. 
  <a href="" ng-click="doSomethingWithAFriend(friend)">Do Something</a>
</li>

编辑：我应该提到在Services中进行 API 调用（或任何 AJAX/数据操作）的正确位置。我只是把它放在控制器中作为一个简单的例子。

于 2013-07-06T02:39:38.780 回答