ng-repeatJSON 파일을 단순하게 실행하고 있으며 카테고리 이름을 가져오고 싶습니다. 각각 하나의 범주에 속하는 약 100 개의 개체가 있지만 약 6 개의 범주 만 있습니다.
내 현재 코드는 다음과 같습니다
<select ng-model="orderProp" >
<option ng-repeat="place in places" value="{{place.category}}">{{place.category}}</option>
</select>
출력은 100 가지 옵션으로, 대부분 복제됩니다. Angular를 사용하여 {{place.category}}이미 존재 하는지 확인하고 이미 존재하는 경우 옵션을 작성하지 않으려면 어떻게합니까?
편집 : 내 자바 스크립트에서 $scope.places = JSON data명확히하기 위해
답변
AngularUI 의 고유 필터 (소스 코드 : AngularUI 고유 필터 )를 사용하여 ng-options (또는 ng-repeat)에서 직접 사용할 수 있습니다.
<select ng-model="orderProp" ng-options="place.category for place in places | unique:'category'">
<option value="0">Default</option>
// unique options from the categories
</select>
답변
또는 lodash를 사용하여 고유 한 필터를 작성할 수 있습니다.
app.filter('unique', function() {
return function (arr, field) {
return _.uniq(arr, function(a) { return a[field]; });
};
});
답변
angular.filter 모듈
에서 ‘unique'(별칭 : uniq) 필터를 사용할 수 있습니다
사용법 : colection | uniq: 'property'
중첩 속성으로 필터링 할 수도 있습니다. colection | uniq: 'property.nested_property'
당신이 할 수있는 일은 그런 것입니다 ..
function MainController ($scope) {
$scope.orders = [
{ id:1, customer: { name: 'foo', id: 10 } },
{ id:2, customer: { name: 'bar', id: 20 } },
{ id:3, customer: { name: 'foo', id: 10 } },
{ id:4, customer: { name: 'bar', id: 20 } },
{ id:5, customer: { name: 'baz', id: 30 } },
];
}
HTML : 고객 ID를 기준으로 필터링합니다 (예 : 중복 고객 제거)
<th>Customer list: </th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
<td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>
결과
고객 목록 :
foo 10
bar 20
baz 30
답변
이 코드는 저에게 효과적입니다.
app.filter('unique', function() {
return function (arr, field) {
var o = {}, i, l = arr.length, r = [];
for(i=0; i<l;i+=1) {
o[arr[i][field]] = arr[i];
}
for(i in o) {
r.push(o[i]);
}
return r;
};
})
그리고
var colors=$filter('unique')(items,"color");답변
범주를 나열하려면 뷰에서 의도를 명시 적으로 언급해야한다고 생각합니다.
<select ng-model="orderProp" >
<option ng-repeat="category in categories"
value="{{category}}">
{{category}}
</option>
</select>
컨트롤러에서 :
$scope.categories = $scope.places.reduce(function(sum, place) {
if (sum.indexOf( place.category ) < 0) sum.push( place.category );
return sum;
}, []);
답변
다음은 간단하고 일반적인 예입니다.
필터 :
sampleApp.filter('unique', function() {
// Take in the collection and which field
// should be unique
// We assume an array of objects here
// NOTE: We are skipping any object which
// contains a duplicated value for that
// particular key. Make sure this is what
// you want!
return function (arr, targetField) {
var values = [],
i,
unique,
l = arr.length,
results = [],
obj;
// Iterate over all objects in the array
// and collect all unique values
for( i = 0; i < arr.length; i++ ) {
obj = arr[i];
// check for uniqueness
unique = true;
for( v = 0; v < values.length; v++ ){
if( obj[targetField] == values[v] ){
unique = false;
}
}
// If this is indeed unique, add its
// value to our values and push
// it onto the returned array
if( unique ){
values.push( obj[targetField] );
results.push( obj );
}
}
return results;
};
})마크 업 :
<div ng-repeat = "item in items | unique:'name'">
{{ item.name }}
</div>
<script src="your/filters.js"></script>답변
나는 독특한 멤버에게 깊이를 줄 수 있도록 @thethakuri의 답변을 확장하기로 결정했습니다. 코드는 다음과 같습니다. 이것은이 기능만을 위해 전체 AngularUI 모듈을 포함하고 싶지 않은 사람들을위한 것입니다. 이미 AngularUI를 사용하고 있다면이 대답을 무시하십시오.
app.filter('unique', function() {
return function(collection, primaryKey) { //no need for secondary key
var output = [],
keys = [];
var splitKeys = primaryKey.split('.'); //split by period
angular.forEach(collection, function(item) {
var key = {};
angular.copy(item, key);
for(var i=0; i<splitKeys.length; i++){
key = key[splitKeys[i]]; //the beauty of loosely typed js :)
}
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});예
<div ng-repeat="item in items | unique : 'subitem.subitem.subitem.value'"></div>