如何从具有过滤器和排序的ng repeat获取id值

时间:2017-12-15 04:49:29

标签: angularjs asp.net-mvc

我需要来自角度表(ngrepeat)的id值,我尝试使用基于索引,我得到了id,但如果我排序或过滤我得到错误的值。 任何人都可以帮助我。

1 个答案:

答案 0 :(得分:0)



(function(){

angular.module('myApp', [])

.controller('MyCtrl', function($window){
  var ctrl = this;
  
  ctrl.myModel = { people: data}
  
  ctrl.callPerson = function(person) {
    $window.alert("Calling " + person.name + "..." + person.phone);
    //$window.location.href = "tel://" + person.phone; will really place the call note this is generated data don't call these numbers
  }
})








var data = [
  {
    "_id": "5a33579a9b942b9fe5f5a358",
    "index": 0,
    "guid": "888545f8-39cd-42f1-b62d-66561f914bbd",
    "isActive": true,
    "balance": "$2,255.62",
    "picture": "http://placehold.it/32x32",
    "age": 39,
    "eyeColor": "brown",
    "name": "Crystal Moody",
    "gender": "female",
    "company": "EBIDCO",
    "email": "crystalmoody@ebidco.com",
    "phone": "+1 (979) 525-3273",
    "address": "885 Boerum Street, Coaldale, Alabama, 5757",
    "about": "Enim culpa ex velit qui Lorem sint consequat eiusmod tempor cillum est anim nisi pariatur. Esse amet dolore qui pariatur et ullamco incididunt laborum minim. Anim occaecat amet irure non sunt aliqua magna cupidatat.\r\n",
    "registered": "2014-11-14T07:10:40 +06:00",
    "latitude": 44.111754,
    "longitude": 109.396716,
    "tags": [
      "eiusmod",
      "voluptate",
      "Lorem",
      "adipisicing",
      "irure",
      "non",
      "fugiat"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Lolita Carroll"
      },
      {
        "id": 1,
        "name": "Morgan Lowe"
      },
      {
        "id": 2,
        "name": "Nelson Monroe"
      }
    ],
    "greeting": "Hello, Crystal Moody! You have 9 unread messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "5a33579ac212dea8803319b2",
    "index": 1,
    "guid": "df60b699-9327-45cc-90ab-48a9529d0be3",
    "isActive": true,
    "balance": "$2,926.45",
    "picture": "http://placehold.it/32x32",
    "age": 20,
    "eyeColor": "blue",
    "name": "Clark Mullen",
    "gender": "male",
    "company": "ESSENSIA",
    "email": "clarkmullen@essensia.com",
    "phone": "+1 (824) 480-2355",
    "address": "588 Celeste Court, Hoehne, North Dakota, 6139",
    "about": "Labore minim amet nisi officia enim magna culpa veniam esse proident minim. Duis Lorem incididunt cupidatat tempor veniam. Adipisicing aliqua qui do ea adipisicing occaecat laboris cupidatat qui.\r\n",
    "registered": "2017-08-23T07:02:33 +05:00",
    "latitude": -59.829075,
    "longitude": -48.944559,
    "tags": [
      "et",
      "sunt",
      "eu",
      "quis",
      "eiusmod",
      "excepteur",
      "eu"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Richardson Kirk"
      },
      {
        "id": 1,
        "name": "Alice Owens"
      },
      {
        "id": 2,
        "name": "Gaines Chase"
      }
    ],
    "greeting": "Hello, Clark Mullen! You have 7 unread messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "5a33579af28bbab5cf8b88a6",
    "index": 2,
    "guid": "b34c0dfa-30f6-433d-ae67-6ca49dc3b563",
    "isActive": true,
    "balance": "$1,472.90",
    "picture": "http://placehold.it/32x32",
    "age": 31,
    "eyeColor": "green",
    "name": "Ellen Booker",
    "gender": "female",
    "company": "ANACHO",
    "email": "ellenbooker@anacho.com",
    "phone": "+1 (933) 536-2492",
    "address": "620 Amity Street, Westboro, Northern Mariana Islands, 1017",
    "about": "Ullamco laboris non qui proident minim. Sit nulla officia cillum voluptate amet ut mollit. Qui sint esse fugiat ullamco elit veniam aliquip exercitation laboris ipsum.\r\n",
    "registered": "2015-01-03T04:41:35 +06:00",
    "latitude": 50.272514,
    "longitude": 172.218658,
    "tags": [
      "ex",
      "duis",
      "mollit",
      "eu",
      "ipsum",
      "cupidatat",
      "excepteur"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Malone Henson"
      },
      {
        "id": 1,
        "name": "Alba Welch"
      },
      {
        "id": 2,
        "name": "Rene Kirby"
      }
    ],
    "greeting": "Hello, Ellen Booker! You have 2 unread messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "5a33579aa8ac1198e99698bd",
    "index": 3,
    "guid": "5340cbbe-564e-4d94-8e4c-5a2c98e71f92",
    "isActive": false,
    "balance": "$3,528.81",
    "picture": "http://placehold.it/32x32",
    "age": 38,
    "eyeColor": "brown",
    "name": "Porter Grimes",
    "gender": "male",
    "company": "GEEKOLA",
    "email": "portergrimes@geekola.com",
    "phone": "+1 (844) 446-3236",
    "address": "331 Coles Street, Diaperville, Connecticut, 3857",
    "about": "Elit proident ea fugiat minim pariatur Lorem proident enim proident consectetur non non. Aliqua et irure Lorem ipsum laborum nostrud magna nulla labore exercitation laboris ut reprehenderit. Exercitation non mollit excepteur ex laborum consequat magna ad aute. Irure ex sint aliqua magna excepteur labore amet enim incididunt mollit Lorem ea amet. Consectetur dolor ipsum in esse sit reprehenderit nulla sunt sit ut laborum eiusmod.\r\n",
    "registered": "2014-11-13T11:02:38 +06:00",
    "latitude": 7.622975,
    "longitude": 169.075008,
    "tags": [
      "culpa",
      "tempor",
      "consectetur",
      "minim",
      "mollit",
      "amet",
      "nulla"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Agnes Harrell"
      },
      {
        "id": 1,
        "name": "Marla Velez"
      },
      {
        "id": 2,
        "name": "Lisa Dennis"
      }
    ],
    "greeting": "Hello, Porter Grimes! You have 2 unread messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "5a33579ae2ad992fc3e3f247",
    "index": 4,
    "guid": "aec451c2-ce01-4ad1-86ec-a49745b1991c",
    "isActive": false,
    "balance": "$3,395.15",
    "picture": "http://placehold.it/32x32",
    "age": 38,
    "eyeColor": "blue",
    "name": "Hammond Mcconnell",
    "gender": "male",
    "company": "BRISTO",
    "email": "hammondmcconnell@bristo.com",
    "phone": "+1 (876) 470-2913",
    "address": "444 Keap Street, Hollins, Wisconsin, 5879",
    "about": "Do elit anim reprehenderit ex laboris cupidatat duis. Ad et enim tempor commodo amet ipsum officia ea dolor occaecat amet eu Lorem adipisicing. Magna duis minim proident et amet sunt duis nostrud tempor tempor commodo ut nisi. Veniam nulla mollit deserunt occaecat nisi laboris adipisicing laboris laborum do ullamco mollit deserunt in. Est cupidatat quis proident elit laborum velit veniam esse magna duis excepteur. Dolor reprehenderit nisi aute cillum voluptate cupidatat aliqua eiusmod excepteur enim ex amet.\r\n",
    "registered": "2017-07-23T10:51:54 +05:00",
    "latitude": 28.196343,
    "longitude": -158.265017,
    "tags": [
      "in",
      "aliqua",
      "esse",
      "enim",
      "incididunt",
      "esse",
      "esse"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Margaret Rose"
      },
      {
        "id": 1,
        "name": "Herring Lee"
      },
      {
        "id": 2,
        "name": "Emily Mcdonald"
      }
    ],
    "greeting": "Hello, Hammond Mcconnell! You have 3 unread messages.",
    "favoriteFruit": "banana"
  },
  {
    "_id": "5a33579ae52a3366af5e8959",
    "index": 5,
    "guid": "2816a836-e2d4-409b-9173-fe0a9490ae1b",
    "isActive": false,
    "balance": "$1,078.79",
    "picture": "http://placehold.it/32x32",
    "age": 39,
    "eyeColor": "green",
    "name": "Allie Young",
    "gender": "female",
    "company": "FREAKIN",
    "email": "allieyoung@freakin.com",
    "phone": "+1 (819) 484-3471",
    "address": "242 President Street, Vowinckel, South Dakota, 6383",
    "about": "Qui magna eu exercitation ex et anim voluptate minim cillum duis. Pariatur minim eu id in ex deserunt aliqua aliqua officia labore qui pariatur aliqua. Dolore velit incididunt minim ipsum incididunt elit do nisi est.\r\n",
    "registered": "2015-05-20T03:08:54 +05:00",
    "latitude": 75.266107,
    "longitude": 135.350245,
    "tags": [
      "enim",
      "est",
      "ipsum",
      "cillum",
      "officia",
      "qui",
      "aliqua"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Walters Jacobson"
      },
      {
        "id": 1,
        "name": "Dionne Justice"
      },
      {
        "id": 2,
        "name": "Potter Ortega"
      }
    ],
    "greeting": "Hello, Allie Young! You have 9 unread messages.",
    "favoriteFruit": "apple"
  }
]

})();

table,td,th{
  border:1px solid black;
  border-collapse:collapse;
}
table, input{
  width:100%
}
button{
  width:100%;
  font-weight:700;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl as ctrl">

<input type="text" ng-model="ctrl.searchTxt"/>
  <table>
    <tr>
      <th>Name</th>
      <th>Company</th>
      <th>Gender</th>
      <th>Eye Color</th>
      <th>Phone</th>
      <th>Action</th>
    </tr>
    <tr ng-repeat="person in ctrl.myModel.people | filter:ctrl.searchTxt | orderBy:'name'">
      <td>{{person.name}}</td>
      <td>{{person.company}}</td>
      <td>{{person.gender}}</td>
      <td>{{person.eyeColor}}</td>
      <td>{{person.phone}}</td>
      <td><button ng-click="ctrl.callPerson(person)">Call</button></td>
    </tr>
  </table>

</div>
&#13;
&#13;
&#13;

根本不要将$ index用作id,并且在ng-repeat中使用对象或其属性调用函数通常可以正常工作。 $index$even$odd类似,它与当前显示有关,而与数据本身无关。如果您的数据没有id只是循环播放并给它们ID,如果您希望它们用于显示目的(请记住,过滤时数字会有间隙)。