AngularJs отображает первый и последний из отфильтрованного списка

У некоторых проблем отображается только первый и последний повторяющийся элемент после фильтрации пустой строки из массива.AngularJs отображает первый и последний из отфильтрованного списка

Мой код:

var myApp = angular.module('myApp', []); 
 

 
myApp.controller("myCtrl", function ($scope, $window) { 
 
    $scope.items = [ 
 
     { name: "item1", color: "green", form: "" }, 
 
     { name: "item2", color: "", form: "circle" }, 
 
     { name: "item3", color: "red", form: "" }, 
 
     { name: "item4", color: "", form: "oval" }, 
 
     { name: "item5", color: "blue", form: "" }, 
 
     { name: "item6", color: "", form: "square" }, 
 
     { name: "item7", color: "yellow", form: "" }, 
 
     { name: "item8", color: "", form: "rectangle" }  
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl" class="ng-scope"> 
 
<div ng-repeat="item in items" ng-if="item.form == ''"> 
 
    {{item.name}}-{{item.color}} 
 
</div> 
 
<br /> 
 
<div ng-repeat="item in items" ng-if="item.color == ''"> 
 
    {{item.name}}-{{item.form}} 
 
</div> 
 
<br /> 
 
</body>

Но мне нужно показать только первый и последний elenemt в списке. Пример. в первом списке: item1-green и item7-yellow (item3-red и item5-blue должны быть скрыты), второй элемент item2-circle и item8-rectangle.

источник

2016-01-16 KingStakh

если одна группа только цвета, а другая группа только формы (формы), почему вы объединить их в один список? также, 'ng-if' ** не является ** фильтром. – Claies

Пожалуйста, покажите ожидаемые результаты. Неясно, в чем цель – charlietfl

Цель - показать только первый и последний элемент из каждого списка. – KingStakh

Я создал пользовательский фильтр для использования. В основном фильтр будет возвращать массив, фильтруя пустое значение для переданного параметра (формы и цвета).

После фильтрации вы можете использовать $first и $last с ng-if, чтобы отображать только первый и последний элементы.

см. Код ниже.

var myApp = angular.module('myApp', []); 
 
    
 

 
    myApp.filter('customFilter', function() { 
 
     return function(input, param) { 
 
     if(input.length == 0) { return [];} 
 
     var result = []; 
 
     angular.forEach(input, function(item) { 
 
      if(item[param] && item[param]!= '') { 
 
      result.push(item); 
 
      } 
 
     }); 
 
     return result; 
 
    } 
 
    }) 
 

 
myApp.controller("myCtrl", function ($scope, $window) { 
 
    $scope.items = [ 
 
     { name: "item1", color: "green", form: "" }, 
 
     { name: "item2", color: "", form: "circle" }, 
 
     { name: "item3", color: "red", form: "" }, 
 
     { name: "item4", color: "", form: "oval" }, 
 
     { name: "item5", color: "blue", form: "" }, 
 
     { name: "item6", color: "", form: "square" }, 
 
     { name: "item7", color: "yellow", form: "" }, 
 
     { name: "item8", color: "", form: "rectangle" }  
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl" class="ng-scope"> 
 
<div ng-repeat="item in items | customFilter:'color'" ng-if="$first || $last"> 
 
    {{item.name}}-{{item.color}} 
 
</div> 
 
<br /> 
 
<div ng-repeat="item in items | customFilter:'form'" ng-if="$first || $last"> 
 
    {{item.name}}-{{item.form}} 
 
</div> 
 
<br /> 
 
</body>

источник

2016-01-16 19:56:27 vinesh

Спасибо, что вы! – KingStakh

Рад, что это помогло !!! – vinesh

Если вы только хотели показать первый и последний элемент элементов внутри ng-repeat вы можете использовать $first & $last переменной ng-repeat шаблона, указанного $first & $last возникновения, если они истинны.

<div ng-repeat="item in items" ng-if="$first || $last"> 
    {{item.name}}-{{item.form}} 
</div>

Update

Для такой ситуации вы должны предпочитать сделать пользовательский фильтр, который будет принимать array, propertyName & valueToCheck. В конце концов он вернется 1-ый и последний элемент

HTML

<div ng-repeat="item in items| returnFirstAndLastValue: 'form': ''"> 
    {{item.name}}-{{item.color}} 
</div> 
<div ng-repeat="item in items| returnFirstAndLastValue: 'color': ''"> 
    {{item.name}}-{{item.form}} 
</div>

Фильтр

myApp.filter('returnFirstAndLastValue', function(){ 
    return function(array, prop, valueToCheck){ 
    var length = (array || []).length, tempOutput = []; 
    angular.forEach(array, function(ele, index){ 
     if(ele[prop] === valueToCheck) 
     tempOutput.push(ele); 
    }) 
    return tempOutput.filter(function(element, index){ 
     if(index == 0 || index == (tempOutput.length - 1)) 
     return element; 
    }) 
    } 
})

Demo Here

источник

2016-01-16 19:34:04

В этом примере показан первый и последний элемент из массива по умолчанию, но мне нужно отфильтровать массив :( – KingStakh

@KingStakh извините за поздний ответ. Я создал фильтр, который избавится от проверки '$ first' &' $ last' в директиве 'ng-repeat'. –

спасибо за ответ, это еще один пример, который разрешил проблему! – KingStakh

Я сделал это;)

var myApp = angular.module('myApp', []); 
 

 
myApp.controller("myCtrl", function ($scope, $window) { 
 
    $scope.items = [ 
 
     { name: "item1", color: "green", shape: "" }, 
 
     { name: "item2", color: "", shape: "circle" }, 
 
     { name: "item3", color: "red", shape: "" }, 
 
     { name: "item4", color: "", shape: "oval" }, 
 
     { name: "item5", color: "blue", shape: "" }, 
 
     { name: "item6", color: "", shape: "square" }, 
 
     { name: "item7", color: "yellow", form: "" }, 
 
     { name: "item8", color: "", shape: "rectangle" }  
 
    ]; 
 
    
 
\t $scope.shape = function(item){ 
 
\t \t return !(item.color == '') 
 
\t }; 
 
\t 
 
\t $scope.color = function(item){ 
 
\t \t return !(item.shape == '') 
 
\t }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="myApp" ng-controller="myCtrl" class="ng-scope"> 
 
<div ng-repeat="item in items | filter:shape" ng-if="$first || $last"> 
 
    {{item.name}}-{{item.color}} 
 
</div> 
 
<br /> 
 
<div ng-repeat="item in items | filter:color" ng-if="$first || $last"> 
 
    {{item.name}}-{{item.shape}} 
 
</div> 
 
<br /> 
 
</body>

источник

2016-01-16 20:00:16 KingStakh

AngularJs отображает первый и последний из отфильтрованного списка

ответ

Смежные вопросы