Question

我已经创建了一个显示下拉列表的指令（表单选择）。但是我找不到标记所选选项的方法。

html表单

 <div content-selects ng-model="ctrl.contentSelects.riskStatus" selection="oneWMS.riskStatusId"></div> <!-- oneWMS.riskStatusId -->

指令

function contentSelects(){
    return {
        restrict: 'AE',
        templateUrl: '/app/Directives/contentSelects.tpl.html',
        replace:true,
        scope: {
            ngModel: '=',
            selection: '='
        },
        controller:function($scope){

        },
        link: function (scope, element, attrs) {
           scope.selectedModel = scope.ngModel[attrs.selection];

            scope.isChanged = function () {
                //console.log("changed");
            }

            element.removeAttr('id');

        }
    };
}// end function contentSelects

这是我不明白的地方：指令模板

<div class="input-group">
<select id="{{id}}">
<option value="model.refId" ng-repeat="model in ngModel track by model.refId" ng-model="ngModel[selection]" >{{model.value}} *** {{selection}} *** {{ngModel[selection]}}</option>
</select>
</div>

在实际值中，{{ngModel[selection]}}给出了我想要的内容（目标模型行），但当与ng-model绑定时，它不会检索任何内容：/

ng-model="ngModel[selection]"

它出了什么问题？使用花括号当然会破坏它......

Answer 1

您的问题是因为选项元素中包含ngModel。您应该将其移动到选择元素。

Demo

<div class="input-group">
  <select ng-model="selectedModel" >
    <option ng-value="model" ng-repeat="model in ngModel">{{model}}         
    </option>
  </select>
</div>

还要看https://docs.angularjs.org/api/ng/directive/ngOptions

在角度选择指令中获取所选模型

1 个答案: