简体   繁体   English

如何从嵌套ng-repeat中访问项目?

[英]How can I access item from nested ng-repeat?

I want to access scope of nested ng-repeat. 我想访问嵌套ng-repeat的范围。 Specifically clicked item. 具体点击的项目。 How can I achieve this? 我该如何实现?

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

and controller 和控制器

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

I am able to get only item scope, how can I get scope of book? 我只能获得项目范围,如何获得书籍范围? If I apply both functions, it triggers both functions, I only want clicked item. 如果我同时应用这两个功能,则会触发这两个功能,我只想要单击的项目。

Edit 编辑

Example

$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"
          }
          ...
        ]
      }
    ]
  }
}

It can be more nested. 它可以嵌套更多。

<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>

It gives me result like this, 它给我这样的结果,

Tom
31
300

Maria
321
500

now if I click on 31, I need topics object only using 现在,如果我单击31,则仅需要使用

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

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

and if I click on Tom, I need the book scope 如果我单击汤姆,我需要书的范围

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

result should be like this, 结果应该是这样的

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

Move ng-click to inner element: 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>

Working demo: demo 工作演示: 演示

You can create a function like this: 您可以创建如下函数:

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>

or you can create 2 or more function like this: 或者您可以创建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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM