Bootstrap dropdown和AngularJS使用相同的ng模型在ng repeat内部进行下拉

Bootstrap dropdown和AngularJS使用相同的ng模型在ng repeat内部进行下拉,angularjs,drop-down-menu,angular-ngmodel,angularjs-ng-change,ng-controller,Angularjs,Drop Down Menu,Angular Ngmodel,Angularjs Ng Change,Ng Controller,我有一个规则列表,在每个规则中都有属性属性,它应该通过属性下拉列表进行设置和获取。在ng repet中,我显示所有规则,即每个属性都具有相同的ng模型、ng控制器和ng更改。这可能会混淆应用程序。我不知道如何在从ruleList[I].属性读取的下拉列表上设置属性。从下拉列表中选择时,将选择右侧选定的属性-ng change。当您想从下拉列表中设置值时,它不起作用。怎么加索引什么的? 我是根据这个例子写的: HTML代码: <tr ng-repeat="r in vm.ruleset.ru

我有一个规则列表,在每个规则中都有属性属性,它应该通过属性下拉列表进行设置和获取。在ng repet中,我显示所有规则,即每个属性都具有相同的ng模型、ng控制器和ng更改。这可能会混淆应用程序。我不知道如何在从ruleList[I].属性读取的下拉列表上设置属性。从下拉列表中选择时,将选择右侧选定的属性-ng change。当您想从下拉列表中设置值时,它不起作用。怎么加索引什么的? 我是根据这个例子写的:

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控制器上的控制器:

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;
    }
}
使用
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>


好的,这样会好一点。如果我删除{{r.selectedAttribute}},因为我不需要它,我还有一个问题,那就是它会出现在关闭的下拉列表中的选定项上,但是当我打开下拉列表时,下面的值会被设置。为什么呢?如何处理这个问题?@wanttobeprofessional我不太明白你的问题。但是纯HTML select在angular方面有问题,所以我建议您在我从DB读取数据并显示表单时看看如何设置每个属性,这就是我的qestion。缺少选择,当我从dorpdown中选择项时,我可以检测到值,但无法设置它。您是否可以在上创建类似的内容,以便更容易看到问题
 <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>