在 angular select 指令中获取 selected 模型

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。您应该将其移动到 select 元素。

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

在 angular select 指令中获取 selected 模型

Getting selected model in angular select directive

directive

angularjs