Angular UI-Select 中的数组和模型选择过滤器不起作用答案

【问题标题】：Filter for array and model selection in Angular UI-Select is not workingAngular UI-Select 中的数组和模型选择过滤器不起作用
【发布时间】：2017-05-09 13:43:37
【问题描述】：

我有一个这样的 Json：

$scope.people = [
{ name: 'Niraj'},
{ name: 'Shivam'},
{ name: 'Arun'},
{ name: 'Mohit'}]

和像var array = "Niraj,Shivam"; 这样的变量现在我想从数组中过滤人名。并且需要确保默认情况下需要在Angular UIselect 中选择数组值。

如图。 我还需要确保在单击“单击我”按钮时，只需要显示新添加的值（期望），或者如果我们获得所有值，那么也没有问题。

这是我的plnkr

【问题讨论】：

请在minimal reproducible example中提供所有相关代码在问题本身中，不仅在第三方网站上。
代码需要在问题中，在 Stack Overflow 上，而不仅仅是在 Plnkr 上。当 Plnkr 删除该代码时，这个问题将毫无用处。请阅读How to Ask。

标签： javascript angularjs arrays json

【解决方案1】：

最后我找到了过滤的解决方案以及基于条件的值列表。这是我的demo.js 文件

    'use strict';

var app = angular.module('demo', ['ngSanitize', 'ui.select']);

app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) {

  $scope.oldArray = [];
  $scope.people = [
    { name: 'Niraj'},
    { name: 'Shivam'},
    { name: 'Arun'},
    { name: 'Mohit'},
    { name: 'Koushik'},
    { name: 'KedaBro'},
    { name: 'Tripathi'},
    { name: 'Nlma'}, 
    { name: 'Nshma'},
    { name: 'BsCoder'}
  ];
  var people = $scope.people;
  var oldArray = [];
  // Now these two values by default need to be selected in multiple selection
  var array = "Niraj,Shivam";
  array = array.split(",");
  for(var i=0 ; i < array.length ; i++){
    oldArray.push({
      name : array[i]
    });
  }
  //filter is wokring fine now
  var filteredArray = people.filter(function(itm){
  return array.indexOf(itm.name) < 0;
  });
  $scope.filteredArray = filteredArray;
 console.log(filteredArray); 

  $scope.multipleDemo = {};
  $scope.multipleDemo.selectedPeople = [];
  for(var  i = 0 ; i < array.length ; i++){
    $scope.multipleDemo.selectedPeople.push({name : array[i]});
  }
  $scope.submitValue = function(){
    console.log($scope.multipleDemo.selectedPeople);
  }
});

这是我的html 文件

    <!DOCTYPE html>
    <html lang="en" ng-app="demo">
    <head>
        <meta charset="utf-8">
        <title>AngularJS ui-select</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js"></script>

        <!-- ui-select files -->
        <script src="./select.js"></script>
        <link rel="stylesheet" href="./select.css">

        <script src="./demo.js"></script>

        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">    
    </head>
    <body class="ng-cloak" ng-controller="DemoCtrl as ctrl">
      <h1>Multiple Selection</h1>
      <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="ctrl.disabled" sortable="true" close-on-select="false" style="width: 500px;">
<ui-select-match placeholder="Select person...">{{$item.name}}</ui-select-match>
        <ui-select-choices repeat="person in filteredArray">
          <div ng-bind-html="person.name"></div>
        </ui-select-choices>
      </ui-select>
      <button name="button" ng-click="submitValue()">Click me</button>
    </body>
    </html>

Link to Plnkr

【讨论】：