NG选项有残疾行 [英] ng-options with disabled rows

问题描述

时有可能使用 NG-选项它将呈现到基于标准禁用行？

这样的：

 ＆LT;选择NG选项=通过c.shade在颜色çc.name组＆GT;
 

也许可能变成是这样的：

 ＆LT;选择NG选项=由c.shade c.name组对C的颜色|禁用（c.shade）＆GT;
 

让我们通过时可能会返回禁用=禁用为所有有色光的颜色=黑暗

过滤说

 ＆LT;选择＆GT;
   ＆LT; OPTGROUP标签=暗＆GT;
      ＆LT;期权价值=0禁用=禁用＆GT;黑白LT; /选项＆GT;
      ＆LT;期权价值=2禁用=禁用＆GT;红色和LT; /选项＆GT;
      ＆LT;期权价值=3禁用=禁用＆GT;蓝色＆LT; /选项＆GT;
   ＆LT; / OPTGROUP＆GT;
   ＆LT; OPTGROUP标签=轻＆GT;
      ＆LT;期权价值=1＆GT;白色＆LT; /选项＆GT;
      ＆LT;期权价值=4→黄色＆LT; /选项＆GT;
   ＆LT; / OPTGROUP＆GT;
 ＆LT; /选择＆GT;
 

解决方案

我不相信有办法做你只是使用 NG-选项问。此问题已提高了对角项目，仍然是开放的：

<一个href=\"https://github.com/angular/angular.js/issues/638\">https://github.com/angular/angular.js/issues/638

如此看来，解决办法是使用的此处引用，并在github上发出指令：的http：//的jsfiddle .NET / alalonde / dZDLg / 9 /

下面是从的jsfiddle整个code代表引用（code以下是alande的的jsfiddle）：

 ＆LT; D​​IV NG控制器=OptionsController＆GT;
    ＆LT;选择NG模型=selectedport
        NG-选项=p.name作为p.name在港口P
        选项​​禁用=p.isinuse在港口P＆GT;＆LT; /选择＆GT;
    ＆LT;输入NG模型=selectedport＆GT;
＆LT; / DIV＆GT;angular.module（'对myApp'，[]）
.directive（'optionsDisabled'，函数（$解析）{
    VAR disableOptions =功能（范围，ATTR，元素，数据，fnDisableIfTrue）{
        //刷新选择元素残疾人选项。
        $（选项[价值！='？']，元素）。每个（函数（I，E）{
            VAR当地人= {};
            当地人[ATTR] =数据[I]
            $（本）.attr（禁用，fnDisableIfTrue（范围，本地人））;
        }）;
    };
    返回{
        优先权：0，
        要求：'ngModel'，
        链接：功能（范围，iElement，iAttrs，CTRL）{
            //解析前pression并建立禁用的选项数组
            VAR expElements = iAttrs.optionsDisabled.match（/ ^ \\ S *（+）\\ S +为\\ S +（+）\\ S +中\\ S +（+）\\ S * /。？）;
            变种attrToWatch = expElements [3];
            变种fnDisableIfTrue = $解析（expElements [1]）;
            范围。$腕表（attrToWatch，功能（为newValue，属性oldValue）{
                如果（newValue）以
                    disableOptions（范围，expElements [2]，iElement，为newValue，fnDisableIfTrue）;
            }，真正的）;
            //把手的正常更新
            范围。$腕表（iAttrs.ngModel，功能（为newValue，属性oldValue）{
                VAR disOptions = $解析（attrToWatch）（范围）;
                如果（newValue）以
                    disableOptions（范围，expElements [2]，iElement，disOptions，fnDisableIfTrue）;
            }）;
        }
    };
}）;功能OptionsController（$范围）{
    $ scope.ports = [{名称：'HTTP'，isinuse：真正}，
                    {名称：'测试'，isinuse：假}];    $ scope.selectedport =测试;
}
 

Is it possible to use ng-options that it will render into disabled rows based on criteria?

this:

 <select ng-options="c.name group by c.shade for c in colors">

maybe possible to turn into something like this:

 <select ng-options="c.name group by c.shade for c in colors | disabled(c.shade)">

and let's say via a filter that could return disabled='disabled' for all the colors that have shade = "dark"

<select>
   <optgroup label="dark">
      <option value="0" disabled="disabled">black</option>
      <option value="2" disabled="disabled">red</option>
      <option value="3" disabled="disabled">blue</option>
   </optgroup>
   <optgroup label="light">
      <option value="1">white</option>
      <option value="4">yellow</option>
   </optgroup>
 </select>

解决方案

I do not believe there is a way to do what you are asking just using ng-options. This issue was raised on the angular project and is still open:

https://github.com/angular/angular.js/issues/638

It seems that the work around is to use a directive which is referenced here and in the github issue: http://jsfiddle.net/alalonde/dZDLg/9/

Here is the entire code from the jsfiddle for reference (the code below is from alande's jsfiddle):

<div ng-controller="OptionsController">
    <select ng-model="selectedport" 
        ng-options="p.name as p.name for p in ports"
        options-disabled="p.isinuse for p in ports"></select>
    <input ng-model="selectedport">
</div>

angular.module('myApp', [])
.directive('optionsDisabled', function($parse) {
    var disableOptions = function(scope, attr, element, data, fnDisableIfTrue) {
        // refresh the disabled options in the select element.
        $("option[value!='?']", element).each(function(i, e) {
            var locals = {};
            locals[attr] = data[i];
            $(this).attr("disabled", fnDisableIfTrue(scope, locals));
        });
    };
    return {
        priority: 0,
        require: 'ngModel',
        link: function(scope, iElement, iAttrs, ctrl) {
            // parse expression and build array of disabled options
            var expElements = iAttrs.optionsDisabled.match(/^\s*(.+)\s+for\s+(.+)\s+in\s+(.+)?\s*/);
            var attrToWatch = expElements[3];
            var fnDisableIfTrue = $parse(expElements[1]);
            scope.$watch(attrToWatch, function(newValue, oldValue) {
                if(newValue)
                    disableOptions(scope, expElements[2], iElement, newValue, fnDisableIfTrue);
            }, true);
            // handle model updates properly
            scope.$watch(iAttrs.ngModel, function(newValue, oldValue) {
                var disOptions = $parse(attrToWatch)(scope);
                if(newValue)
                    disableOptions(scope, expElements[2], iElement, disOptions, fnDisableIfTrue);
            });
        }
    };
});

function OptionsController($scope) {
    $scope.ports = [{name: 'http', isinuse: true},
                    {name: 'test', isinuse: false}];

    $scope.selectedport = 'test';
}

这篇关于NG选项有残疾行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！