Javascript 角度：如何处理属性提供的代码作为我想要的一个例子，考虑下面的例子 <select ng-options="option.text for option in options"></select>_Javascript_Angularjs_Angularjs Directive

Javascript 角度：如何处理属性提供的代码作为我想要的一个例子，考虑下面的例子 <select ng-options="option.text for option in options"></select>

javascript angularjs

Javascript 角度：如何处理属性提供的代码作为我想要的一个例子，考虑下面的例子 <select ng-options="option.text for option in options"></select>,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,在我的指令中，我想使用类似于ngOptions的东西，因为我需要创建一个列表例如，假设我有一个指令barFoo，如下所示： <bar-foo options="options"></bar-foo> <ol> <li ng-repeat="option in options" ng-bind="option.text"></li> </ol> 使用模板/html，如下所示： <bar-foo opti

在我的指令中，我想使用类似于ngOptions的东西，因为我需要创建一个列表

例如，假设我有一个指令barFoo，如下所示：

<bar-foo options="options"></bar-foo>

<ol>
    <li ng-repeat="option in options" ng-bind="option.text"></li>
</ol>

使用模板/html，如下所示：

<bar-foo options="options"></bar-foo>

<ol>
    <li ng-repeat="option in options" ng-bind="option.text"></li>
</ol>


选项中的选项ng bind=“option.text”>

要把这一切变成一个电话，需要什么

<bar-foo options="option.text for option in options"></bar-foo>

我需要它的主要原因是因为我不知道保存标签文本的属性名（在本例中，它是text）

我提供了一个提琴，看看这是否有帮助。我没有为options中的option传入“options.text”，而是将其设置为先传入“options”数组，然后传入所需的字段。我假设字段将设置为变量；如果它是硬编码的，那么您可以改为使用field='someFieldName'

HTML

<body ng-app='testApp'>
    <div ng-controller='TestCtrl'>
        <bar-foo options='options' field='{{optionsField}}'></bar-foo>
    </div>
</body>

angular.module('testApp', [])
.controller('TestCtrl', function($scope) {
    $scope.options = [
        {
            text: 'Node.js rocks my socks',
            language: 'Node.js',
        },
        {
            text: 'Angular is hot',
            language: 'Angular.js',
        },
        {
            text: 'Backbone.js is mmmm',
            language: 'Backbone.js',
        }        
    ];
    $scope.optionsField = 'text';
})
.directive('barFoo', function() {
    return {
        restrict: 'E',
        scope: {
            options: '=',
            field: '@'
        },
        template: '<ol><li ng-repeat="option in options" ng-bind="option[field]"></li>'
    };
})

角度模块（'testApp'，[]） .controller（'TestCtrl'，函数（$scope）{ $scope.options=[ { 文本：“Node.js震撼我的袜子”，语言：“Node.js”， }, { 文字：“角度很热”，语言：“Angular.js”， }, { 文本：“Backbone.js是mmmm”，语言：'Backbone.js'， } ]; $scope.optionsField='text'； }) .directive（'barFoo'，function（）{ 返回{ 限制：'E'，范围：{ 选项：“=”，字段：'@' }, 模板：'

' }; })

您可以通过解析属性来完成此操作。另一个解决方案是将其作为两个属性传递（参见另一个答案）

您可能应该为此使用regexp，但我很快编写了代码：

app.directive('barFoo',function($parse) {
 return {
  restrict: 'E',
  scope: {},
  templateUrl: "template.html",
  link: function(scope,element,attrs) {
    var splitOptions = attrs.options.split(' for ');
    scope.fieldName = splitOptions[0].split('.')[1];
    var repeatExp = splitOptions[1];
    scope.valueName = repeatExp.split(' in ')[0];
    var collectionName = repeatExp.split(' in ')[1];
    scope.values = $parse(collectionName)(scope.$parent);       
  }
 };
});

请看

我检查了angular代码，发现它们有一个非常令人印象深刻的正则表达式来拆分该字符串。我不认为这是首选的解决方案！我首先尝试使用正则表达式，但不太明白发生了什么。这只是为了说明基本的想法。