角度：如何處理屬性

提供爲我想要什麼的示例代碼，考慮下面的例子角度：如何處理屬性

<select ng-options="option.text for option in options"></select>

在我的指令，我想用類似ngOptions的東西，因爲我需要創建一個列表

例如，假設我有一個指令barFoo，叫如下：

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

與模板/ HTML如下：

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

我們需要改變這一切爲呼叫像

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

主要的原因，我需要的，這是因爲我不知道屬性名稱持有標籤文本（在這種情況下，文本）

來源

2014-03-06 Jeanluca Scaljeri

我提供了一個小提琴，看看這是否有助於。除了傳遞「options.text在選項選項」中，我把它，這樣你通過「選項」數組，然後你想要的領域。我假設該領域將被設置爲一個變量;如果它是硬編碼的，那麼你可以改爲使用field ='someFieldName'。

http://jsfiddle.net/y376K/1/

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

來源

2014-03-06 16:15:33

您可以通過解析屬性做到這一點。另一個解決辦法是把它作爲兩個屬性（見對方的回答）

你或許應該使用正規的，但我很快編碼這樣的：

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

見this plnkr

來源

2014-03-06 16:28:51

我檢查角碼，並看到他們有一個非常令人印象深刻的正則表達式來分割該字符串。我不認爲這是首選的解決方案！ –

我第一次嘗試使用正則表達式，但不明白髮生了什麼事。這只是爲了展示基本的想法。 –

角度：如何處理屬性

回答

相關問題