Question

我有一个带有选项列表的表格

<form class="column-form">
    <select id="classSelection" ng-change="classOptionChange()" ng-model="selectedClass" maxHeight="120">
        <option selected value="">{{classOptions}}</option>
    </select>
</form>

示例类选项在这里

[{"id":"classR","text":" Color - Red"},{"id":"classG","text":"Color -  Green"}, {"id":"classY","text":"Color - Yellow"}]

我的指令很简单，因为我只是想打印出所选选项的值。但是，它始终为null。

(function() {
    appModule.directive('classDefault', [ '$translate', '$timeout', '$window', classService, function($translate, $timeout, $window, $document, classService) {
        return {
            restrict : 'E',
            scope : {
               .......
            }
        link : function(scope, element) {
            scope.classOptionChange() = function() {
                console.log(scope.selectedClass);

有什么建议吗？

更新-感谢您提供以下所有建议。显然，我们正在使用此小部件，该小部件应该呈现选项列表，然后绑定到select标签，但目前已损坏。

Answer 1

似乎您没有正确呈现所有传递给指令的选项。理想情况下，您应该使用classOptions / ng-repeat指令遍历ng-options集合，并渲染select标记填充的option。然后在每个选项元素上指定ng-value-"opt"。这基本上可以帮助您将整个option对象分配给selectedClass ng模型。

模板

<form class="column-form">
  <select id="classSelection" 
    ng-change="classOptionChange()" ng-model="selectedClass" 
      maxHeight="120">
    <option selected value="">Select option</option>
    <option ng-value="opt" ng-repeat="opt in classOptions">{{opt.text}}</option>
  </select>
</form>

Demo Plunker

Answer 2

您需要将数组绑定到select标签。一种选择是使用NgOptions指令。

这是一个可行的例子

angular.module("app",[]).controller("ctrl", function($scope){
$scope.items = [{"id":"classR","text":" Color - Red"},{"id":"classG","text":"Color -  Green"}, {"id":"classY","text":"Color - Yellow"}];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
<select ng-change="classOptionChange()" 
ng-model="selectedClass" 
maxHeight="120"
ng-options="item as item.text for item in items">
    </select>
    
    <h3>{{selectedClass}}</h3>
    </div>

选择选项时ng-model不更新

2 个答案: