Question

我的数据模板如下所示，

scope.items=[{"name:"John","score":1},{"name":"Rick","score":5},{"name":"Peter","score":2}]

我有一个值为0,1,2,3,4,5的选择框，并希望根据下拉菜单中选择的items object过滤score value

scope.scores= [
                {
                    "name":"condition 0",
                    "value":"0"
                },
                {
                    "name":"condition 1",
                    "value":"1"
                },
                {
                    "name":"condition 2",
                    "value":"condition 2"
                },
                {
                    "name":"condition 3",
                    "value":"3"
                },
                {
                    "name":"condition 4",
                    "value":"4"
                },
                {
                    "name":"condition 5",
                    "value":"5"
                }
            ]

HTML

 <select  id="scoreS"  ng-model="score" ng-change="updateScore()">
                    <option
                            ng-repeat="score in scores"
                            value="{{score.value}}">{{score.name}}</option>
                </select>

因此，当我从下拉框中选择condition 0时，我需要过滤items以仅显示与分数（键）0匹配的对象，当我从下拉列表中选择1时，仅匹配具有得分（关键）1等。你如何在updateScore（）函数中执行此操作？

Answer 1

试试这样。最好在ng-options中使用ng-repeat代替drop-down

var app = angular.module('anApp', []);
app.controller('aCtrl', function($scope) {
$scope.items=[
  {"name":"John","score":1}
,{"name":"Rick","score":5}
,{"name":"Peter","score":2}
]

$scope.scores= [
                {
                    "name":"condition 0",
                    "value":"0"
                },
                {
                    "name":"condition 1",
                    "value":"1"
                },
                {
                    "name":"condition 2",
                    "value":"2"
                },
                {
                    "name":"condition 3",
                    "value":"3"
                },
                {
                    "name":"condition 4",
                    "value":"4"
                },
                {
                    "name":"condition 5",
                    "value":"5"
                }
            ]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="anApp" ng-controller="aCtrl as vm">
<select  id="scoreS"  ng-model="score" ng-options="score.value as score.name for score in scores ">
                </select>
     <div ng-repeat="item in items| filter:{score:score}">
     <span>{{item.name}}</span>
     </div>
</div>

Answer 2

使用filter选项根据下拉列表过滤数据

<div ng-repeat="item in items | filter :score">

演示

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.scores= [
                {
                    "name":"condition 0",
                    "value":"0"
                },
                {
                    "name":"condition 1",
                    "value":"1"
                },
                {
                    "name":"condition 2",
                    "value":"2"
                },
                {
                    "name":"condition 3",
                    "value":"3"
                },
                {
                    "name":"condition 4",
                    "value":"4"
                },
                {
                    "name":"condition 5",
                    "value":"5"
                }
            ]
$scope.items=[{"name":"John","score":1},{"name":"Rick","score":5},{"name":"Peter","score":2}]
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <select  id="scoreS"  ng-model="score" ng-change="updateScore()">
    <option ng-repeat="score in scores" value="{{score.value}}">{{score.name}}</option>
    </select> 
    <div ng-repeat="item in items | filter :score">
    {{item.name}}=  {{item.score}}
    </div>
</div>

ng-change内的角度js滤波器

2 个答案: