Question

嘿我正在尝试编写扩展ngOptions的指令。我对角度很新，所以如果你看到任何可以改进的东西让我知道。

所以我想编写一个指令，让我为ngOption生成的选项添加属性。我创建了一个简单的指令，它将添加标题，类或我为选项定义的任何属性。这有效，但我觉得它有点乱。请记住，并非所有错误处理都存在。这仍然是原型。

这是我的指示

.directive('ngOptionsExt', function($parse) {
  //Simplified ng-options regex still messy
  var regex = /^\s*([\s\S]+?)?\sfor\s+([\$\w][\$\w]*)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))$/;
  return {
    require: 'select',
    link: function(scope, elem, attrs) {

      var match = attrs.ngOptionsExt.match(regex);

      if (match) {
        var map = match[1],
          option = match[2],
          optionSource = match[3],
          track = match[4] || false,
          getOptionsAttrs = $parse(map);

        scope.$watchCollection(optionSource, function(items) {

          angular.forEach(items, function(item, index) {
            var attributes = getOptionsAttrs(item);

            if (track)
              option = elem.find('option[' + track + '="' + item[track] + '"]');
            else
              option = elem.find('option[value' + index + ']');

            angular.forEach(attributes, function(val, attrName) {
              angular.element(option).attr(attrName, val);
            });

          });
        });
      }
    }
  };
});

用法：

ng-options-ext="{title: label, class: label} for option in options track by label"

其中options与ngOptions使用的模型相同。 track by仅用于按标签查找选项（不确定这是否正确），以避免依赖索引添加属性。

上面的指令将添加一个标题和一个与option元素的标签具有相同值的类。

你们有没有必要写类似的东西，并对如何改进这个有任何想法？

由于

Answer 1

您可以在<option>内的<select>上使用ngRepeat。

<select ng-model="value" ng-change="change()">
  <option ng-repeat="element in elements " value="{{element.value}}" 
        data-custom-attribute="...">{{element.value}}</option>
</select>

Answer 2

嘿我最终得到了类似的东西。看起来效果很好，看起来比以前更干净。 @ o4ohel，我继续前进，就像你提到的那样简单地完成选项。然后将属性映射到选项源。

mysqli_free_result

用法：

.directive('ngOptionsAttr', function ($parse) {
    return {
        require: 'select',
        link: function(scope, elem, attrs) {
            var match = attrs.ngOptionsAttr.split(' for '),
                map = match[0],
                src = match[1],
                getOptionsAttrs = $parse(map);
            scope.$watchCollection(src, function() {
                angular.forEach(elem.find("option"), function (option) {
                    angular.forEach(getOptionsAttrs(option), function(val, name) {
                        angular.element(option).attr(name, val);
                    });
                });
            });
        }
    };
});

Answer 3

我遇到了类似的问题并通过覆盖$ render函数解决了它，并使用lodash循环选项来设置我的属性，

link: function(scope, element, attributes, modelCtrl){
    modelCtrl.$render = function() {
        var select = element.find(select);
        _.each(select.children(), function(option) {
            //set attributes here
        }
    }
}

此处唯一的要求是要求：＆＃39; ngModel＆＃39;在你的指令定义中。

扩展ngOptions

3 个答案: