Question

我使用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>

JS

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

Answer 1

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

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

ng-repeat需要一个唯一的ID来跟踪项目，以便能够更新它们。如果你添加两次相同的项目，ng-repeat会看到两次相同的项目，但是它会失去理智。使用$ 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>

Answer 2

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

编辑：我是多么尴尬，我的答案看起来和jlowcs一样。我想我花了很多时间才弄清楚答案。

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

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

从ng-repeat更新视图上的文本

2 个答案: