选择框：显示文本“错误”，如果在阵列

Question

不存在值I具有如下所定义的键值对，这是正在使用纳克选项

$scope.BucketEnum = [ 
    { display: 'Error', value: 0 }, 
    { display: '1', value: 1 }, 
    { display: '2', value: 2 }, 
    { display: '3', value: 3 }, 
    { display: '4', value: 4 }, 
    { display: '5', value: 5 }, 
    { display: 'Flows', value: 125 }, 
    { display: 'Recovery', value: 151 } 
]; 

我使用此密钥值用于选择对在NG选项

 <select ng-model="selectedBucket" ng-options="row.value as rows.display for row in BucketEnum" multiple="multiple" ></select> 

显示选择框，如果我现在设置NG-模型即$scope.selectedBucket = 10，我想显示的文字错误。是否有可能为$scope.BucketEnum数组中的所有值显示值Error。

注意

我在看一个更通用的方式做到这一点，例如过滤器这样做

情景

有一个在数据库中的某些历史数据，其中有一些垃圾和一些很好的数据。

对于每个垃圾值，我需要显示当前的垃圾值以及可供选择的有效值，以便最终用户修复它。

Answer 1

这是否符合您的需求？

jsfiddle

app.filter('bootstrapValues', function(){ 
    return function(initial, baseBucket){ 
     var result = []; 
     for(var i=0; i<initial.length; i++){ 
      var flag = false; 
      for(var j=1; j<baseBucket.length; j++){ //from 1 or 0.. you call 
       if(initial[i] === baseBucket[j].value){ 
        flag = true; 
        result.push(baseBucket[j]); 
        break; // if there are repeated elements 
       } 
      } 
      if(!flag) 
       result.push(baseBucket[0]) 
     } 
     return result; 
    }; 
}); 

使用它来启动selectedBucket，在你的控制器：

// setting initials 
     $scope.selectedBucket = $filter('bootstrapValues')(initialSet, $scope.bucketEnum); 

帮助？

编辑：这里是其他jsfiddle几乎没有修改，如果该值不在桶中它将元素添加到列表中，并显示错误和作为选定的值。

Answer 2

您需要明确地为此编写代码。根据所选择的选项扫描您想要设置的选项。如果您找不到它，请选择错误值。

还需要注意的是，您需要为selectedBucket传递一个数组，并且它需要包含实际的选项对象，而不仅仅是它们中的值。

<div ng-app="myApp"> 
    <div ng-controller="myController"> 
     <p>Select something</p> 
    <select ng-model="selectedBucket" 
    ng-options="row as row.display for row in bucketEnum" multiple="multiple"> 
    </select> 
    </div> 
</div> 

。

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

app.controller('myController', function ($scope) { 

    var initialSet = [1, 5, 10]; 

    $scope.bucketEnum = [ 
     { display: 'Error', value: 0 }, 
     { display: '1', value: 1 }, 
     { display: '2', value: 2 }, 
     { display: '3', value: 3 }, 
     { display: '4', value: 4 }, 
     { display: '5', value: 5 }, 
     { display: 'Flows', value: 125 }, 
     { display: 'Recovery', value: 151 } 
    ]; 

    var selected = []; 
    var error = $scope.bucketEnum[0]; 
    angular.forEach(initialSet, function(item) { 
     var found; 
     angular.forEach($scope.bucketEnum, function (e) { 
      if (+item == +e.value) { 
       console.log('Found ', e); 
       found = item; 
       selected.push(e); 
      } 
     }); 
     if (typeof found === 'undefined') { 
      selected.push(error); 
     } 
     $scope.selectedBucket = selected; 
     console.log(selected); 
     }); 
}); 

Answer 3

使用ng-options将为您的BucketEnum数组中的每个项目生成多个HTML <select>元素，并在您的ng模型变量中返回所选值：selectedBucket。我认为显示选项时没有额外的空白条目的唯一方法是确保selectedBucket的值是BucketEnum中的有效条目。

你的问题指出：

如果设置了NG-模型即$scope.selectedBucket = 10，我想显示 文字错误。

我假设你要显示的值：{{BucketEnum[selectedBucket].display}}

所以...开始$scope.selectedBucket = 10，我们要实现一个选择使用NG选项，将这个值重置为默认的一些通用的方法。

您可以通过实施一个属性指令，让你写这样做：

<select ng-model="selectedBucket" select-default="BucketEnum" 
     ng-options="row.value as row.display for row in BucketEnum" 
     multiple="multiple"> 

这种方法的一个例子如下所示。请注意，这里假定默认值为零，并且不处理多个选择（当与BucketEnum中的每个项目进行比较时，您必须迭代选择内容，并决定如果有多个有效和无效选项混合使用）。

app.directive("selectDefault",function(){ 
    return{ 
     restrict: 'A', 
     scope: false, 
     link:function(scope,element,attrs){ 
      var arr= scope[attrs.selectDefault]; // array from attribute 
      scope.$watch(attrs.ngModel,function(){ 
       var i, ok=false; 
       var sel= scope[attrs.ngModel];  // ng-model variable 
       for(i=0; i<arr.length; i++){  // variable in array ? 
        if(arr[i].value == sel)  // nasty '==' only for demo 
         ok= true; 
       } 
       if(! ok) 
        scope[attrs.ngModel]=0; // set selectedBucket to 0 
      }); 
     } 
    }; 
}); 

我碰到了一个jsfiddle of this here

这样做的缺点是，我使用的NG-模型引起的副作用，即命名变量意志的任何分配的$腕表触发$ watch功能。

如果这是哪门子的解决方案，您正在寻找，你可以扩展指令的各种方式，例如：

<select ng-model="selectResult" 
     select-default="99" array="BucketEnum" initial="selectedBucket" 
     ng-options="row.value as row.display for row in BucketEnum" 
     multiple="multiple"> 

...的想法是，在select-default指令会读取默认值（“99”在这里），array和initial值然后设置selectResult相应