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

Using ng Repeat inside a custom directive to populate a select dropdown

本文关键字：Repeat 填充 选择 下拉列表 ng 自定义 指令      更新时间：2023-09-26

我在自定义指令中使用ng Repeat填充选定的下拉菜单时遇到了问题。我发现这个例子看起来非常类似于我想要实现http://plnkr.co/edit/W1MMx7vjKKXFuV8LbBjJ?p=preview。它似乎有效，但不是我的。

目标:获取select下拉列表以显示来自testArray

的选项数组

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

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

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

将data改为data:

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

和

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

似乎'data'作为属性是保留的

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

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