【问题标题】：How can I access item from nested ng-repeat?如何从嵌套的 ng-repeat 访问项目？
【发布时间】：2019-09-05 11:38:46
【问题描述】：

我想访问嵌套 ng-repeat 的范围。专门点击的项目。我怎样才能做到这一点？

<div ng-repeat="item in list" ng-click="get(item)">
    <div ng-repeat="book in books" ng-click="get(book)">
        {{book.name}}
    </div>
</div>

和控制器

$scope.get = function(item){
       console.log(item);
};

我只能获取项目范围，如何获取书籍范围？如果我同时应用这两个函数，它会触发这两个函数，我只想要点击的项目。

编辑

例子

$scope.json = {
  "data": {
    "books": [
      {
        "id": "1",
        "name": "Tom",
        "pub": "Cruise",
        "photo": ".jpg",
        "topics": [
          {
            "id": "1",
            "pages": "31"
          },
          {
            "id": "2",
            "pages": "300"
          }
        ]
      },
      {
        "id": "2",
        "name": "Maria",
        "pub": "Sharapova",
        "photo": ".jpeg",
        "topics": [
          {
            "id": "1",
            "pages": "321"
          },
          {
            "id": "2",
            "pages": "500"
          }
          ...
        ]
      }
    ]
  }
}

它可以嵌套更多。

<div ng-repeat="book in json.data.books" ng-click="get(book)">
    <div><bold>{{book.name}}</bold></div>
    <div ng-repeat="topic in book" ng-click="get(topic)">
        {{topic.pages}}
    </div>
</div>

它给了我这样的结果，

Tom
31
300

Maria
321
500

现在如果我点击 31，我只需要使用主题对象

 function get(topic){
      console.log(topic);
   }

console:
    {
      "id": "1",
      "pages": "31"
    }

如果我点击 Tom，我需要图书范围

 function get(book){
          console.log(book);
     }

结果应该是这样的，

{
        "id": "1",
        "name": "Tom",
        "pub": "Cruise",
        "photo": ".jpg",
        "topics": [
          {
            "id": "1",
            "pages": "31"
          },
          {
            "id": "2",
            "pages": "300"
          }
        ]
      }

【问题讨论】：

你想得到book范围的依据是什么？
不是很清楚你想在这里实现什么。这些列表是独立的吗？
@JeetPatel 你试过ng-click="get(book,item)" 吗？
@MikeRoss ng-click="get(book,item)" 给了我'未定义'，我也试过 $scope.dealWithItem = function () { console.log(this); }
@BillP 我只想从 ng-repeat 上方获得点击的项目范围。

标签： javascript angularjs

【解决方案1】：

将ng-click 移动到内部元素：

<div ng-repeat="book in json.data.books">
    <div ng-click="get(book)"><b>{{book.name}}</b></div>
    <div ng-repeat="topic in book.topics">
        <div ng-click="get(topic)">{{topic.pages}}</div>
    </div>
</div>

工作演示：demo

【讨论】：

哦，我很接近了。，我正在做
，谢谢！

【解决方案2】：

你可以像这样创建一个函数：

function get(topic, refItem){
    console.log(topic);
    if (refItem) {
        console.log(refItem); 
        //or console.log(JSON.stringify(refItem);
    }
}

<div ng-repeat="book in json.data.books" ng-click="get(book)">
    <div><bold>{{book.name}}</bold></div>
    <div ng-repeat="topic in book" ng-click="get(topic, book)">
        {{topic.pages}}
    </div>
</div>

或者您可以像这样创建 2 个或多个函数：

function getBook(book){
    console.log(book);
}

function getTopic(topic, book){
    console.log(topic);
    console.log(book);
}

<div ng-repeat="book in json.data.books" ng-click="getBook(book)">
    <div><bold>{{book.name}}</bold></div>
    <div ng-repeat="topic in book" ng-click="getTopic(topic, book)">
        {{topic.pages}}
    </div>
</div>

【讨论】：