Bootstrap 下拉菜单和 AngularJS 相同的 ng-model for dropdown inside ng-repeat

Question

我有规则列表，每个规则里面都有属性属性，应该从属性下拉列表中设置和获取。在 ng-repet 中，我显示所有规则，即每个属性都具有相同的 ng-model、ng-controller 和 ng-change。这可能会使应用程序感到困惑。我不知道如何在从 ruleList[i].attribute 读取的下拉列表中设置属性。从下拉列表中选择时，正确的 selectedAttribute 是 chooseen - ng-change。当想从下拉列表中设置值时，它不起作用。如何添加一些索引或其他东西？我已经按照这个例子写了它：http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/29/how-to-work-with-the-bootstrap-dropdown-in-angularjs.aspx

HTML代码：

<tr ng-repeat="r in vm.ruleset.ruleList track by $index" ng-init="$ruleIndex = $index">
    <td align='right'>
        <div ng-controller="vm.attributeDropdown" init-data="$ruleIndex" class="col-xs-12 col-sm-4 col-md-3">
            <div class="form-group" ng-class="{ 'has-error': vm.rulesetForm.attribute.$touched && vm.rulesetForm.attribute.$invalid }">
                <div>
                    <span>{{selectedAttribute}}</span>
                        <select class="form-control" required ng-model="selectedAttribute" ng-options="i.attributenamecap for i in vm.attributes" id="vm.rulesetForm.attribute" ng-change="correctAttribute($ruleIndex, selectedAttribute)">
                            <option style="display:none" translate="rulesets.ruleset.form.placeholder.attribute""></option>
                        </select>
                        </div>
                       <div class="help-block" ng-show="vm.rulesetForm.$submitted || vm.rulesetForm.attribute.$touched">
                       <span ng-show="vm.rulesetForm.attribute.$error.required" translate=  "rulesets.ruleset.form.error.required.attribute"></span>
                </div>
            </div>
        </div>
    </td>
</tr>

ng-change 上的控制器：

 $scope.correctAttribute = function(index, selectedAttribute){
    if(index !== undefined || index !== null){
        vm.ruleset.ruleList[index].attribute = selectedAttribute;
    }
}

ng-controller 上的控制器：

function attributeDropdown($scope){
    var index = $scope.$ruleIndex;
    $scope.vm.attributes = vm.attributes;
    $scope.vm.attributes.unshift('');
    if(!isNew()){
        if(vm.ruleset.ruleList[index].attribute === ''){
            vm.ruleset.ruleList[index].attribute = null;
            $scope.selectedAttribute = vm.ruleset.ruleList[index].attribute;
            vm.original = angular.copy(vm.ruleset);
        }else{
            $scope.selectedAttribute = vm.ruleset.ruleList[index].attribute;
        }
    }else if(vm.ruleset.ruleList[index].attribute !== undefined ){
    $scope.selectedAttribute = vm.ruleset.ruleList[index].attribute;
    }
}

Answer 1

使用ng-model="r.selectedAttribute"代替ng-model="selectedAttribute"

像这样

 <select class="form-control" required ng-model="r.selectedAttribute" ng-options="i.attributenamecap for i in vm.attributes" id="vm.rulesetForm.attribute" ng-change="correctAttribute($ruleIndex, r.selectedAttribute)">
         <option style="display:none" translate="rulesets.ruleset.form.placeholder.attribute""></option>
    </select>

Bootstrap 下拉菜单和 AngularJS 相同的 ng-model for dropdown inside ng-repeat

Bootstrap dropdown and AngularJS the same ng-model for dropdown inside ng-repeat

angularjs

drop-down-menu

angular-ngmodel

angularjs-ng-change

ng-controller