Question

<select class="form-control" select-multiple-picker multiple data-max-options="2" ng-model="userDetails.ClinicalRoles" name="createUserSelectClinicalRoles" id="createUserSelectClinicalRoles">
    <option ng-repeat="role in clinicalRole" value="{{role.Description}}">{{role.Description}}</option>
</select>

这里我从服务器到列表获取数据，我只向用户显示{{role.Description}}，但是当我提交时，我需要将role.id和role.Description附加到ng-Model用于调用API。

Answer 1

您可以使用ng-options执行此操作，然后选择为：https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 2

不要使用ng-repeat。请改用ng-options。

试试这个 -

WEEKEND_DAYS 
Monday,Thursday,Saturday

如果您想一次选择两者。然后你可以使用一个技巧。在select中添加ng-change属性，并将所选的role.id作为函数中的模型传递。

<强> HTML

<select class="form-control" select-multiple-picker multiple data-max-options="2" ng-model="userDetails.ClinicalRoles" name="createUserSelectClinicalRoles" id="createUserSelectClinicalRoles"
ng-options="role.id as role.Description for role in clinicalRole">                
</select>

<强> JS

<select class="form-control" select-multiple-picker multiple data-max-options="2" ng-model="userDetails.ClinicalRoles" name="createUserSelectClinicalRoles" id="createUserSelectClinicalRoles"
ng-options="role.id as role.Description for role in clinicalRole" 
ng-change="setDescription(role)">                
</select>

只需这样做。

Answer 3

您可以在ng-model中保存完整对象，而不是单个属性。

HTML： -

<div data-ng-app="myApp" data-ng-controller="Ctrl" style="margin-top:40px">
        <div>
            <select class="form-control" id="Region" data-ng-model="selectedValue" data-ng-options="value.Desc for value  in values track by value.id">
                <option value=''>Select</option>
            </select>
        </div>
        <div>
            Selected Option Label : {{selectedValue.label}}<hr/>
            Selected Option Id : {{selectedValue.id}}<hr/>
            Selected Option Desc : {{selectedValue.Desc}}<hr />
        </div>
    </div>

Javascript： -

     <script type="text/javascript">

           var IsApp = angular.module('myApp', []);

            IsApp.controller('Ctrl', function ($scope, $http) {
                $scope.values = [{
                    id: 1,
                    label: 'aLabel',
                    Desc: 'Desc-aLabel'
                }, {
                    id: 2,
                    label: 'bLabel',
                    Desc: 'Desc-bLabel'
                }];
            });// End of controller
        </script>

提交时，您可以传递 selectedValue.id 和 selectedValue.Desc 。

如何动态地将id附加到ng-model

3 个答案: