Question

我有一个如下定义的键值对，用于使用ng-options

进行选择

 $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-options

中的选择框

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

现在，如果我设置ng-model即$scope.selectedBucket = 10，我想显示文本错误。是否可以为Error数组中不存在的所有值显示值$scope.BucketEnum。

注意

我正在研究一种更通用的方法，例如这样做的过滤器

SCENARIO

数据库中有一定的历史数据，有一些垃圾和一些好的数据。

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

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

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

你的问题是：

如果我设置ng-model即$scope.selectedBucket = 10，我想显示文本错误。

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

所以......从$scope.selectedBucket = 10开始，我们想要一些使用ng-options实现select的通用方法，它会将此值重置为默认值。

您可以通过实现属性指令来执行此操作，允许您编写：

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

此方法的一个示例如下所示。请注意，这假定默认值为零并且不处理多个选择（当与BucketEnum中的每个项目进行比较时，您必须迭代选择，并确定如果存在有效和无效选择的混合，该怎么做）。 / p>

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-model上使用了$ watch会导致副作用，即命名变量的任何赋值都会触发$ 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相应

Answer 3

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

另请注意，您需要为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);
      });
 });

选择框：如果数组中不存在值，则显示文本“错误”

3 个答案: