Question

我在自定义指令中使用ng Repeat填充选定的下拉列表时遇到了问题。我发现这个示例与我想要达到的Tim Allison非常相似。它似乎有效，但不是我的。

目标：获取选择下拉列表以显示testArray中的选项数组

Plunkr：http://plnkr.co/edit/W1MMx7vjKKXFuV8LbBjJ?p=preview

＆＃13;

var app = angular.module('myapp', []);

app.controller('mainController', function($scope) {
  $scope.testArray = [{'option' : '1' }, {'option': '2'}, {'option': '3' }];
  $scope.testModel = {};
});

app.directive('testDirective', function() {
  return {
    scope: {
      dataHeldmodel: '=',
      dataOptions: '='
    },
    template: '<select name="dataHeldmodel" data-ng-model="dataHeldmodel">' +
                    '<option value="">Select</option>' +
                    '<option value="{{option.option}}" data-ng-repeat="option in dataOptions">{{option.option}}</option>' +
                '</select>',
    replace: true
  }
});

＆＃13;

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<!DOCTYPE html>
<html data-ng-app="myapp">

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body data-ng-controller="mainController">
    <test-directive data-options="testArray" data-heldmodel="testModel"></test-directive>
  </body>

</html>

＆＃13;

Answer 1

尝试使用默认的ng-options指令来解决此问题。

<select ng-model="testModel" ng-options="obj.name for obj in testArray track by obj.id"></select>

Answer 2

使用ng-repeat工作plnkr： http://plnkr.co/edit/MP2C1VDi9YlM1HBDsbO2

将数据更改为dat：

scope: {
  datHeldmodel: '=',
  datOptions: '='
}

和

<test-directive dat-options="testArray" dat-heldmodel="testModel"></test-directive>

似乎保留了'data'作为属性。

在自定义指令中使用ng Repeat来填充选择下拉列表

2 个答案: