Question

我有一个带有奶牛列表的.json文件，其中详细列出了每个奶牛的生活位置。

我有两个小组。

一个面板显示奶牛列表，我使用ng-repeat显示了这个。

当点击母牛的标题时，会出现第二个面板，这一切都非常棒且有效。然而，我无法找到如何通过特定母牛的位置。是否有可能通过抓取并传递牛阵列中的数字？我试过通过{{＆＃39; cow＆＃39;}}认为这代表阵列ID，但我不认为我在正确的轨道上，所以我认为我是d在这里张贴。

有没有办法传递数据，只显示点击的牛的位置？我是否需要致电诺言？

谢谢 - 我到目前为止的代码

HTML

<html ng-app="animalApp">
<section ng-controller="AnimalController as animalCtrl">
<ul ng-controller="PanelController as panel">
  <li ng-class="{ active: panel.isSelected(1)}" ng-show="panel.isSelected(1)">
    <ul>
      <li ng-repeat="cow in animalCtrl.cows">
        <h2>
          <a href="" data-ng-bind="cow.name" ng-click="panel.selectTab(2); cowId({{cow}})"></a>
        </h2>
      </li>
    </ul>
  </li>
  <li ng-class="{ active: panel.isSelected(2)}" ng-show="panel.isSelected(2)">
    <p>This {{animalCtrl.cow.name}} lives in {{animalCtrl.cow.country}}</p>
    <a href="" ng-click="panel.selectTab(1)">Back to all cows</a>
  </li>
</ul> 
</section>
</html>

JS

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

app.controller('AnimalController', ['$http', '$scope',function($http, $scope){
    var type = this;
    type.cows = [ ];
    $http.get('animals.json').success(function(data){
        type.cows = data;
    });

app.controller("PanelController", function() {
    this.tab = 1;
    this.selectTab = function(setTab) {
        this.tab = setTab;
    };
    this.isSelected = function(checkTab) {
        return this.tab === checkTab;   
    }
});

JSON

[
   {
        "name": "Angus",
        "country": "UK"
   },
   {
        "name": "Hereford",
        "country": "Canada"
   },
   {
        "name": "Dwarf Lulu",
        "country": "Nepal"
   },
   {
        "name": "Ongole",
        "country": "India"
   }
]

这是一个PLUNKER，其中添加了提交的答案（谢谢），但仍然可以使其工作。点击＆＃39; Angus UK。我打算让段落说“这个安格斯住在英国＆＃39; - 目前没有。再次感谢您的帮助。

Answer 1

你可以传递cow。根据您的代码，这似乎是您想要的。

<li ng-repeat="cow in animalCtrl.cows">
    <h2>
      <a href="" data-ng-bind="cow.name" ng-click="panel.selectTab(2); animalCtrl.cowId(cow)"></a>
    </h2>
  </li>

控制器

app.controller('AnimalController', ['$http', '$scope',function($http, $scope){
    var type = this;
    type.cows = [ ];
    $http.get('animals.json').success(function(data){
        type.cows = data;
    });
    type.cowId = function(cow){
        this.cow = cow;
    };
}

或者如果你想传递迭代牛的索引

<li ng-repeat="cow in animalCtrl.cows">
    <h2>
      <a href="" data-ng-bind="cow.name" ng-click="panel.selectTab(2); animalCtrl.cowId($index)"></a>
    </h2>
  </li>

控制器

app.controller('AnimalController', ['$http', '$scope',function($http, $scope){
    var type = this;
    type.cows = [ ];
    $http.get('animals.json').success(function(data){
        type.cows = data;
    });
    type.cowId = function(id){
        this.cow = type.cows[id];
    };
}

Plunkr

通过点击angularjs传递数据

1 个答案: