AngularJS - ng-repeat에서 정의되지 않은 속성에 대한 필터?

AngularJS - ng-repeat에서 정의되지 않은 속성에 대한 필터?

나의 앵귤러용JS프로젝트(v1.2.3), 루트 리스트가 있고 오브젝트에서 네비게이션 바를 작성하려고 합니다.정의되지 않은 오브젝트를 표시하려고 합니다.isRight속성이 정의되어 있는 다른 스타일과 다른 스타일입니다.

인원ng-repeat정의되지 않은 개체로 필터링하고 싶다.isRight소유물.어떻게 하면 이 작업을 할 수 있을까요?ng-repeat커스텀 필터 기능을 작성하지 않고 속성을 설정할 수 있습니까?

$scope.nav = [
    { path: '/', title: 'Home' },
    { path: '/blog', title: 'Blog' },
    { path: '/about', title: 'About' },
    { path: '/login', title: 'Login', isRight: true }
];

속성을 추가할 수 있다는 걸 깨달았습니다.isRight: false오른쪽과 왼쪽 링크 및 기타 간단한 회피책을 위해 개별 네비게이션 오브젝트를 사용할 수 있습니다.하지만 다음과 같은 방법을 사용하여 현재 구조에서 이를 달성할 수 있는 방법이 있는지 궁금합니다.

<li ng-repeat="link in nav | filter:{isRight:undefined}">

이것은 필요라기보다는 호기심이지만, 어떤 제안이라도 감사합니다.

필터식을 무효로 할 수 있습니다.그래서 이 문제를 다루는 대신undefined그냥 걸러내면 돼요.isRight(가 아니다)!)그렇습니다.이렇게요.

<li ng-repeat="link in nav | filter:{isRight:'!true'} ">

물론, 그 반대의 경우는, 다음과 같은 작업을 수행할 수 있습니다.

<li ng-repeat="link in nav | filter:{isRight:'true'} ">

데모 바이올린

를 사용할 수도 있습니다.<li ng-repeat="link in nav | filter:{isRight:'!'}">

참고 항목: 각도로 자리 표시자를 표시하는 방법정의되지 않은 식 값에 대한 JS?

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

app.controller('mainCtrl',['$scope' , function($scope) {


$scope.nav = [
    { path: '/', title: 'Home' },
    { path: '/blog', title: 'Blog' },
    { path: '/about', title: 'About' },
    { path: '/login', title: 'Login', isRight: true }
];
  
}])

<div ng-app="myApp" ng-controller="mainCtrl">

<h3>!isRight</h3>
<ul>
<li ng-repeat="link in nav | filter:{isRight:'!'}">{{link.title}}</li>
</ul>
  
  
<h3>isRight</h3>
<ul>
<li ng-repeat="link in nav | filter:{isRight:'!!'}">{{link.title}}</li>
</ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

편집

방금 질문을 다시 읽었는데, 당신이 원하는 답이 아니에요.문서화를 위해 남겨두겠습니다만, 커스텀 필터를 작성하거나 커스텀 필터 기능을 사용하지 않고서는 원하는 기능을 얻을 수 없다고 생각합니다.

정의되지 않은 검색 기능이 기본 필터에서 작동하지 않는 이유를 자세히 설명하려면 Angular에서 이 코드를 살펴봅니다.JSfilter실행.

switch (typeof expression) {
  ...
  case "object":
    // jshint +W086
    for (var key in expression) {
      (function(path) {
        if (typeof expression[path] == 'undefined') return;
        predicates.push(function(value) {
          return search(path == '$' ? value : getter(value, path), expression[path]);
        });
      })(key);
    }
    break;
  ...
}

필터 객체의 속성 값이 다음과 같은 경우undefined, 술어 배열에 술어 함수는 추가되지 않습니다.고객님의 경우,isRight의 재산.undefined(필터식은{isRight:undefined}).

원답

언제든지 술어 함수를 사용하여 임의 필터(문서)를 만들 수 있습니다.

술어 함수를 사용하여 임의 필터를 쓸 수 있습니다.이 함수는 배열의 각 요소에 대해 호출됩니다.최종 결과는 술어가 true를 반환한 요소의 배열입니다.

컨트롤러에서 원하는 항목을 선택하는 방법을 만듭니다.

$scope.isRightUndefined = function(item) {
  return item.isRight === undefined;
}

당신의 반복을 다음과 같이 변경합니다.

<li ng-repeat="link in nav | filter:isRightUndefined">

module.filter('notNullOrUndefined', [function () {
    return function (items, property) {
        var arrayToReturn = [];
        for (var i = 0; i < items.length; i++) {
            var test = property !== undefined ? items[i][property] : items[i];
            if (test !== undefined && test !== null) {
                arrayToReturn.push(items[i]);
            }
        }
        return arrayToReturn;
    };
}]);

사용방법:

<div class="col-md-12" ng-repeat="style in styles | notNullOrUndefined:'background'">
    <span class="ed-item">{{style.name}} Background</span>
</div>

언급URL : https://stackoverflow.com/questions/21070119/angularjs-filter-for-undefined-properties-in-ng-repeat