選擇框：顯示文本「錯誤」，如果在陣列

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相應