ng-repeat:不要复制select中的类型

时间:2016-04-30 21:54:34

标签: javascript angularjs json

我有这个HTML:



<div layout="row" layout-align="center center">
            <md-select placeholder="Property type" ng-model="id" md-on-open="loadProperties()" style="min-width: 200px; padding: 20px;">
                <md-option ng-value="id" ng-repeat="id in list" >{{id.propertyType}}</md-option>
            </md-select>
</div>
&#13;
&#13;
&#13;

通过Angular从这个json获取数据

    {
  "properties": [
    {
      "propertyId": "5702581e3678da025f79c83d",
      "price": 493967,
      "mainImg": "//loremflickr.com/668/501/house,facade",
      "images": [
        {
          "thumbUrl": "//loremflickr.com/372/279/property,interior",
          "mainUrl": "//loremflickr.com/668/501/property,interior"
        },
        {
          "thumbUrl": "//loremflickr.com/372/279/property,interior",
          "mainUrl": "//loremflickr.com/668/501/property,interior"
        },
        {
          "thumbUrl": "//loremflickr.com/372/279/property,interior",
          "mainUrl": "//loremflickr.com/668/501/property,interior"
        },
        {
          "thumbUrl": "//loremflickr.com/372/279/property,interior",
          "mainUrl": "//loremflickr.com/668/501/property,interior"
        },
        {
          "thumbUrl": "//loremflickr.com/372/279/property,interior",
          "mainUrl": "//loremflickr.com/668/501/property,interior"
        },
        {
          "thumbUrl": "//loremflickr.com/372/279/property,interior",
          "mainUrl": "//loremflickr.com/668/501/property,interior"
        }
      ],
      "beds": 6,
      "propertyType": "Terraced House",
      "propertyAddress": "628 Arlington Avenue, Jardine, California, 2444",
      "description": "Fugiat voluptate sunt deserunt sit tempor culpa. Officia ullamco do reprehenderit pariatur Lorem elit. Veniam pariatur commodo minim laborum eu velit mollit et mollit occaecat. Non consequat officia cupidatat proident enim ipsum nulla nostrud reprehenderit laboris culpa aute qui. Nulla adipisicing officia sunt incididunt cillum qui exercitation officia labore esse minim. Enim occaecat mollit amet laboris id excepteur elit mollit ex tempor exercitation duis.\r\n"
    }

我刚刚减少了这个json,因为它太大了,但我有很多不同的属性,不同的属性ID,但有时具有相同的PropertyType。我要做的是,创建一个这样的选择:Select-img 但它总是给我重复的值,你可以在图像上看到。

如果不重复这些值,我该怎么办?

谢谢你,对不起我的英语。

1 个答案:

答案 0 :(得分:1)

您可以使用unique过滤器来避免重复。例如:

<div layout="row" layout-align="center center">
   <md-select placeholder="Property type" ng-model="id" md-on-open="loadProperties()" style="min-width: 200px; padding: 20px;">
      <md-option ng-value="id" ng-repeat="id in list | unique:'propertyType'" >{{id.propertyType}}</md-option>
   </md-select>
</div>

请记住,AngularJS没有内置的unique过滤器,您必须编写自己的过滤器。例如:

app.filter('unique', function() {
   return function(input, key) {
      var unique = {};
      var uniqueList = [];
      for(var i = 0; i < input.length; i++){
          if(typeof unique[input[i][key]] == "undefined"){
            unique[input[i][key]] = "";
            uniqueList.push(input[i]);
          }
      }
      return uniqueList;
   };
});