为了账号安全,请及时绑定邮箱和手机立即绑定

如何在带有ng-options的select中使用ng-class

/ 猿问

如何在带有ng-options的select中使用ng-class

慕仰8121524 2019-11-02 09:56:42

我有一个Person对象数组


var persons = [

{Name:'John',Eligible:true},

{Name:'Mark',Eligible:true},

{Name:'Sam',Eligible:false},

{Name:'Edward',Eligible:false},

{Name:'Michael',Eligible:true}

];

我正在使用带有ng-options这样的select:


<select ng-model="Blah" ng-options="person.Name for person in persons"></select>

我想显示与记录符合条件的:假的红颜色。所以问题是我如何使用ng-class在select序来实现这一目标?因为我们没有使用任何option标签,如果我只需添加它不会工作ng-class在select元素本身。


查看完整描述

3 回答

?
qq_笑_17

您可以在处理ngOptions指令后创建一个处理选项的指令,以适当的类更新它们。


更新:旧代码有一些错误,自从我回答了这个问题以来,我学到了一些东西。这是在1.2.2中重做的Plunk(但也应在1.0.X中工作)


这里更新了代码:


app.directive('optionsClass', function ($parse) {

  return {

    require: 'select',

    link: function(scope, elem, attrs, ngSelect) {

      // get the source for the items array that populates the select.

      var optionsSourceStr = attrs.ngOptions.split(' ').pop(),

      // use $parse to get a function from the options-class attribute

      // that you can use to evaluate later.

          getOptionsClass = $parse(attrs.optionsClass);


      scope.$watch(optionsSourceStr, function(items) {

        // when the options source changes loop through its items.

        angular.forEach(items, function(item, index) {

          // evaluate against the item to get a mapping object for

          // for your classes.

          var classes = getOptionsClass(item),

          // also get the option you're going to need. This can be found

          // by looking for the option with the appropriate index in the

          // value attribute.

              option = elem.find('option[value=' + index + ']');


          // now loop through the key/value pairs in the mapping object

          // and apply the classes that evaluated to be truthy.

          angular.forEach(classes, function(add, className) {

            if(add) {

              angular.element(option).addClass(className);

            }

          });

        });

      });

    }

  };

});

这是在标记中使用它的方式:


<select ng-model="foo" ng-options="x.name for x in items" 

   options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }"></select>

它像ng-class一样工作,不同之处在于它是基于集合中的每个项目。


查看完整回答
反对 回复 2019-11-02
?
繁星coding

在这种情况下,只有ng-repeat与选项标签一起使用时,您才可以应用ng-class :


<select ng-model="Blah">

  <option ng-repeat="person in persons" ng-class="{red: person.Eligible}">{{person.Name}}</option>  

</select>

这将为您的“合格”人员提供自定义类,但是CSS在弓箭手之间无法始终如一地工作。


查看完整回答
反对 回复 2019-11-02
?
浮云间

我想对已接受的答案发表评论,但由于我的信誉点不足,因此必须添加答案。我知道这是一个古老的问题,但是最近在接受的答案中添加了注释。


对于angularjs 1.4.x,必须修改建议的指令以使其再次运行。由于ngOptions中的重大更改,选项的值不再是索引,因此该行


option = elem.find('option[value=' + index + ']');


将不再工作。


如果您将插件中的代码更改为


<select ng-model="foo" ng-options="x.id as x.name for x in items" 

            options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }"></select>


结果,选项标签的值现在为


value="number:x" (x是item对象的id)


将指令更改为


option = elem.find('option[value=\'number:' + item.id + '\']');


使它再次工作。


当然,这不是通用解决方案,因为如果您的对象中没有id,该怎么办?然后,您将value="object:y"在option标记中找到y是由angularjs生成的数字,但y不能将其映射到您的商品。


希望这可以帮助某些人在将angularjs更新到1.4.x之后再次使他们的代码工作


我也尝试使用track byin ng-options,但没有使其正常工作。也许有更多人在angularjs方面有经验,然后是我(=我在angularjs中的第一个项目)?


查看完整回答
反对 回复 2019-11-02

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信