从 ng-repeat 更新视图中的文本答案

【问题标题】：updating text on view from ng-repeat从 ng-repeat 更新视图中的文本
【发布时间】：2015-03-20 19:12:33
【问题描述】：

我在使用 ng-repeat 更新视图时遇到问题。单击文本时，它不会更新，但会覆盖下面。（我想要有名称（链接）的面板并在视图中显示其描述）我已经搜索了所有内容，但找不到对我有帮助的答案或有用的东西。

html:

 <body>
    <div  ng-app="myApp">
        <div ng-controller="myCtrl">
            <ul>
                <li><a   ng-repeat="item in items" ng-click="getInfo(item)" > {{item.name}} <br> </a></li>
            </ul>                           
        </div>
        <hr>

            <div ng-controller="myInfo"> 
                <div   ng-repeat="info in item"  >  
                <h3>Name: {{info.name}}</h3>
                    <p> ID: {{info._id}}</p>
                    <p> temp: {{info.temp}}  </p>
                </div>          
            </div>
        </div> 

  </body>

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

app.controller('myCtrl', function($scope, $http, shareDataService) {
      $http.jsonp('data.json').success(function(data) {
          $scope.items = data;

        });
        $scope.getInfo = function(item) {
            shareDataService.addItem(item);

    }
});
app.controller('myInfo', function( $scope, shareDataService ){
    $scope.item = shareDataService.getItem();
});
app.service('shareDataService', function() {
  var myItem = [];

  var addItem = function(newObj) {
      myItem.push(newObj);
  }
  var getItem = function(){
      return myItem;
  }
  return {
    addItem: addItem,
    getItem: getItem
  };
});

json

angular.callbacks._0([
    {
        "_id": 1,
        "temp": "asdgdf",
        "name": "name1"
    },
    {
        "_id": 2,
        "temp": "asdasdasd",
        "name": "name2"
    },
     {
        "_id": 3,
        "temp": "asasdasdadgdf",
        "name": "name3"
    }
]);

Plunker：http://plnkr.co/edit/X65oH0yAkRnN8npKnFY2?p=preview

【问题讨论】：

我可以在发布答案之前澄清您的要求吗？您是想让第二个 <div> 在您单击它们时显示项目列表，还是希望它仅显示最后一个单击的元素？

标签： javascript html angularjs angularjs-ng-repeat panel

【解决方案1】：

您的控制台出现错误。只需将 track by 添加到您的 ng-repeat：

<div ng-repeat="info in item track by $index">

ng-repeat 需要一个唯一的 id 来跟踪项目，以便能够更新它们。如果你两次添加相同的项目，ng-repeat 会看到两次相同的项目，ans 会失去理智。使用 $index（它是唯一的）可以解决这个问题。

请记住，这里使用 $index 就足够了，但如果可以的话，最好使用对象的唯一 ID。

编辑：

如果您的问题是您只想在视图中看到您单击的一个元素，那么问题是您将项目添加到数组中，而您应该只是在服务中设置一个值。而且，显然，您认为不需要ng-repeat。

http://plnkr.co/edit/Wfg9KhCWKMDreTFtirhR?p=preview

JS：

app.controller('myCtrl', function($scope, $http, shareDataService) {
    //[...]
        $scope.getInfo = function(item) {
            shareDataService.setItem(item);
    }
});
app.controller('myInfo', function( $scope, shareDataService ){
  $scope.$watch(function () {
    return shareDataService.getItem();
  }, function (value) {
    $scope.info = value;
  })
});
app.service('shareDataService', function() {
  var myItem;

  return {
    setItem: function(newObj) {
      myItem = newObj;
    },
    getItem: function(){
      return myItem;
    }
  };
});

HTML：

        <div ng-controller="myInfo" ng-show="info">  
            <h3>Name: {{info.name}}</h3>
                <p> ID: {{info._id}}</p>
                <p> temp: {{info.temp}}  </p>
        </div>

【讨论】：

【解决方案2】：

如果您只想显示刚刚单击的项目的信息，那么我们不需要第二个 ng-repeat（如 jlowcs 所说）。我们也不必将 myItem 定义为数组，我认为这只是不必要的。

编辑：我有多尴尬，我的答案看起来和 jlowcs 的完全一样。我想我花了很多时间来找出答案。

要加起来的一件事：为什么我需要在 myInfo 控制器中使用 $watch？

因为我们第一次使用 ng-repeat，这个组件为我们做了 watch 部分。然后当我删除 ng-repeat 时，我需要自己观察数据的变化。

【讨论】：