对于选择ng-options中的对象,Angularjs过滤器不为null:

时间:2016-07-14 08:14:26

标签: angularjs angularjs-filter

我正在尝试过滤出物品和物品。角度1.5.6不是null

我尝试了post的所有选项。

仍然无法使其发挥作用。

只有' Sally'应显示在select

以下是fiddle

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
   <br>

     <select ng-model="a" ng-options="detail.name for detail in details | filter:{shortDescription:'!null'} track by detail.name">
  </select>

    <br>
    New 

     <select ng-model="b" ng-options="detail.name for detail in details | filter:{shortDescription: ''} track by detail.name">
  </select>

    <br>
    All
    <select  ng-model="c" ng-options="detail.name for detail in details | filter:{shortDescription: '!!'} track by detail.name">
  </select>

  <br>
  Without any filter
  <select ng-model="d" ng-options="detail.name for detail in details track by detail.name">
  </select>
  <!-- -->
</div>

脚本:

function myCtrl($scope) {
    $scope.details = [{
        name: 'Bill',
        shortDescription: null
    }, {
        name: 'Sally',
        shortDescription: {'MyName':'A girl'}
    }];
}

angular.module("myApp",[]).controller("myCtrl", myCtrl);

5 个答案:

答案 0 :(得分:2)

请运行此代码段以实现目标

&#13;
&#13;
function myCtrl($scope) {
    $scope.details = [{
        name: 'Bill',
        shortDescription: null
    }, {
        name: 'Sally',
        shortDescription: {'MyName':'A girl'}
    }];

}

angular.module("myApp",[]).controller("myCtrl", myCtrl).filter('descFilter',descFilter);

function descFilter(){
	return function(array,key){
  	var newArr = [];
    for(var i = 0; i < array.length; i++){
    	if (array[i][key] != null){
       newArr.push(array[i]);
      }
    }
    return newArr;
  };
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
   <br>
     With Filter:
     <select ng-model="a" ng-options="detail.name for detail in details | descFilter:'shortDescription'">
  </select>
    
  
  <br>
  Without any filter
  <select ng-model="d" ng-options="detail.name for detail in details track by detail.name">
  </select>
  <!-- -->
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

问题是students[0] = new Student("Mark", 16, 77.6); students[1] = new Student("Sam", 17, 56.9); students[2] = new Student("Polly", 16, 97.4); for (Student student : students) { student.printStudent(); } 只匹配基元但不匹配复杂的对象,而你的案例中filter:{shortDescription: ''}是嵌套对象。
因此,请改为使用shortDescription

filter:{shortDescription:{$:''}}

答案 2 :(得分:1)

在ngOptions中,非空检查被认为不起作用。相反,您可以创建自定义过滤器并使用它。

以下是自定义过滤器功能的示例。 http://jsfiddle.net/ivankovachev/bue59Loj/

自定义过滤功能:

$scope.isDescriptionNull = function(item) {
            if (item.shortDescription === null) return false;

          return true;
        }

以及如何使用它:

<select ng-model="a" ng-options="detail.name for detail in (details | filter:isDescriptionNull) track by detail.name">

答案 3 :(得分:0)

你的标记中有一点错误。

过滤器需要获取对象属性,表达式或比较器。

官方文件:

<head>
    <script>
        require([
            "dojo/parser",
            "dijit/form/Select",
            "dijit/TooltipDialog",
            "dojo/on",
            "dojo/dom",
            "dojo/_base/lang",
            "dijit/popup",
            "dojo/data/ObjectStore",
            "dojo/store/Memory",
            "dojo/domReady!"
        ], function(parser,Select,TooltipDialog,on,dom,lang,popup, ObjectStore, Memory){
            parser.parse();
            var t={mySel:null};



            var store = new Memory({
                data: [
                    { id: "foo", label: "Foo" },
                    { id: "bar", label: "Bar" }
                ]
            });

            var os = new ObjectStore({ objectStore: store });

            t.mySel = new Select({
                store: os
            }, "ttt");
            var myTooltipDialog = new TooltipDialog({
                content: t,
                onMouseLeave: function(){
                    popup.close(myTooltipDialog);
                }
            });
            on(dom.byId("mmm"),"mouseover" ,lang.hitch(this,function(e){

                popup.open({
                    popup: myTooltipDialog,
                    orient: ["above-centered","above","below"],
                    around:dom.byId('mmm')

                });
                t.mySel.startup();
            }));
            t.mySel.on("change", function(){
                console.log("my value: ", this.get("value"))
            })

        })
    </script>

</head>
<body class="claro">

    <div id="ttt"  >  tttt</div><br>
    <div id="mmm"  >  tttt</div><br>
</body>

所以,你所做的并不是一个有效的过滤器

答案 4 :(得分:0)

<select ng-model="a" 
          ng-options="detail.name for detail in details  | filter:{shortDescription:'!!'}} track by detail.name">
  </select>