Question

我想用下拉模板创建一个指令。我尝试将ng-options的值作为指令的参数，但下拉列表仅包含默认值。

这篇帖子中有一个小提琴和我的代码： http://jsfiddle.net/wXV6Z/6/

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

function Ctrl($scope){    
    $scope.countries = [
        algeria={name:'ALGERIA', phoneCode:'213'},
        andorra={name:'ANDORRA', phoneCode:'376'},
        angola={name:'ANGOLA', phoneCode:'244'}
    ];
}

app.directive('skiTest', function() {
    return {
      'replace': true,
      'restrict': 'E',
      'scope': {
        'data': '=',
      }, 
      link: function (scope, element, attrs) {
            scope.options = attrs.selectOptions;
       },
        'template':'<div><select name="testSelect" ng-model="ngModel" ng-options="
      {{options}} in data"><option value="">Code</option></select></div>'
        }
      });

这是HTML：

<div ng-controller="Ctrl">
    <div>
        <h2>Without directive</h2>
        <select ng-model="code" ng-options="country.phoneCode as country.name for    country in countries">
            <option value="">Code</option>
        </select>
    </div>
    <div>
        <h2>With directives</h2>
        <ski-test data="countries" select-options="country.phoneCode as country.name for country"></ski-test>
    </div>
</div>

非常感谢有人可以指出我的错误！

Answer 1

指令中的模板只需要这样：

'template':'<div><select name="testSelect" ng-model="data" ng-options="c.name for c in data"><option value="">Code</option></select></div>'

我把你的小提琴分开了：http://jsfiddle.net/W5Ex3/

AngularJS：使用ng-options参数下拉指令

1 个答案: