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

我在使用ng repeat更新视图时遇到问题。 当点击文本时，它不会更新，但会覆盖下面的内容。（我希望面板上有名称（链接）并在视图中显示其说明） 我找遍了所有的东西，找不到答案，也找不到有用的东西来帮助我

html:

json

---

Plunker:

您的控制台出现错误。只需在ng repeat中添加

track by

：

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

HTML:

名称：{{info.Name}
ID:{{info.\u ID}

临时：{{info.temp}

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

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

总而言之： 为什么我需要myInfo控制器中的$watch

---

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

在发布答案之前，我可以澄清您的要求吗？您是想让第二个

在单击项目时显示项目列表，还是希望它只显示最后一个单击的元素？

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
  };
});

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

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

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;
    }
  };
});

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