Angular.js - 使用 ng-options 向选项添加类 [英] Angular.js - adding a class to an option with ng-options

查看：27
本文介绍了Angular.js - 使用 ng-options 向选项添加类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有人问过类似的问题(如何使用ng-class in select with ng-options)，但我也在添加我的，因为它与另一个人的问题的答案有关.

解决方案很棒，但我不太明白.

答案是创建一个指令 - http://plnkr.co/edit/rbc4GWBffi4eFYhbvS6u?p=预览.

我想做同样的事情，但添加的类应该与 items.name 相同.我该怎么做?

console.clear();var app = angular.module('angularjs-starter', []);app.controller('MainCtrl', function($scope) {$scope.items = [{ name: 'foo', id: 1, 合格: true },{ name: 'bar', id: 2, 合格: false },{ name: 'test', id: 3, 合格: true }];});app.directive('optionsClass', function ($parse) {返回 {要求:'选择'，链接:功能(范围，元素，属性，ngSelect){//获取填充 select 的 items 数组的源.var optionsSourceStr = attrs.ngOptions.split(' ').pop(),//使用 $parse 从 options-class 属性中获取一个函数//您可以稍后使用它进行评估.getOptionsClass = $parse(attrs.optionsClass);scope.$watch(optionsSourceStr, function(items) {//when the options source changes loop through its items.angular.forEach(items, function(item, index) {//对项目进行评估以获得映射对象//为您的课程.var classes = getOptionsClass(item),//也得到你需要的选项.这个可以找到//通过寻找具有适当索引的选项//值属性.option = elem.find('option[value=' + index + ']');//现在遍历映射对象中的键/值对//并应用评估为真的类.angular.forEach(classes, function(add, className) {如果(添加){angular.element(option).addClass(className);}});});});}};});

/* CSS 放在这里 */.is-合格{颜色:绿色；}.不容忽视 {红色;}

<html ng-app="angularjs-starter"><head lang="zh-cn"><meta charset="utf-8"><title>自定义Plunker</title><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script><link rel="stylesheet" href="style.css"><脚本>document.write('<base href="' + document.location + '"/>');<script src="app.js"></script><body ng-controller="MainCtrl"><select ng-model="foo" ng-options="x.name for x in items"options-class="{ 'is-eligible' : 合格, 'not-eligible': !eligible }"></select></html>

提前致谢

解决方案

Fix

app.directive('optionsClass', function ($parse) {返回 {要求:'选择'，链接:功能(范围，元素，属性，ngSelect){var optionsSourceStr = attrs.ngOptions.split(' ').pop(),getOptionsClass = $parse(attrs.optionsClass);scope.$watch(optionsSourceStr, function(items) {var options = elem.find("option");angular.forEach(items, function(item, index) {var classes = getOptionsClass(item);var option = options.eq(index);angular.forEach(classes, function(add, className) {如果(添加){angular.element(option).addClass(className);}});});});}};});

https://jsfiddle.net/AndersBillLinden/ne0z9vwm/32/

Someone asked a similar question (How to use ng-class in select with ng-options), but I'm adding mine too, because it's related to the answer of the other guy's question.

The solution is awesome, but I don't quite understand it.

The answer was creating a directive - http://plnkr.co/edit/rbc4GWBffi4eFYhbvS6u?p=preview.

I would like do the same, but the class added should be the same as items.name. How do I do that?

console.clear();

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    { name: 'foo', id: 1, eligible: true },
    { name: 'bar', id: 2, eligible: false },
    { name: 'test', id: 3, eligible: true }
    ];
});

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);
            }
          });
        });
      });
    }
  };
});

/* CSS goes here */
.is-eligible {
  color: green;
}
.not-eligible {
  color: red;
}

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <select ng-model="foo" ng-options="x.name for x in items" 
            options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }"></select>
  </body>

</html>

Thanks in advance

解决方案

Fix

app.directive('optionsClass', function ($parse) {
  return {
    require: 'select',
    link: function(scope, elem, attrs, ngSelect) {
      var optionsSourceStr = attrs.ngOptions.split(' ').pop(),
        getOptionsClass = $parse(attrs.optionsClass);

        scope.$watch(optionsSourceStr, function(items) {        
        var options = elem.find("option");
        angular.forEach(items, function(item, index) {
          var classes = getOptionsClass(item);
          var option = options.eq(index);
          angular.forEach(classes, function(add, className) {
            if(add) {
              angular.element(option).addClass(className);
            }
          });
        });
      });
    }
  };
});

https://jsfiddle.net/AndersBillLinden/ne0z9vwm/32/

这篇关于Angular.js - 使用 ng-options 向选项添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆