Question

我在表单上方有一个表，当选择一行时，它会用数据填充表单。该表单有一个select元素。在选择表中的第一行后，数据将正确填充并显示正确的选定选项。在第二次和后续选择中，未显示正确的选定选项。在chrome dev工具中，我可以看到值正确更新，但它没有直观显示。

我错过了什么？如何才能在视觉上显示正确的选项？

<select name="updateCategory" ng-model="selectedPermission.permission.category_id">
       <option value="{{cat.id}}" ng-selected="cat.selected" ng-repeat="cat in selectedPermission.permission_categories">
              {{cat.name}}
       </option>
</select>

这是控制器中正在更新范围的功能。

         $rootScope.$watch('toolBarSelectedValue',function(){
            if($rootScope.toolBarSelectedValue >0){
                Permissions.getItem($rootScope.toolBarSelectedValue).then(function(res){
                    var pc = res.data.permission_categories;
                    var p = res.data.permission;
                    angular.forEach(pc,function(v,k){
                        if(v.id == p.category_id){
                            pc[k].selected = true;
                        }else{
                            pc[k].selected = false;
                        }
                    });
                    $scope.selectedPermission = {"permission":p,"permission_categories":pc};
                    $scope.$apply();
                });
            }else if($rootScope.toolBarSelectedValue == 0 || $rootScope.toolBarSelectedValue == null){
                $scope.selectedPermission = {};
            }
        });

Answer 1

我会使用ng-options而不是<option...></option>，然后您可以轻松地将您的选择与您的ng模型联系起来。有关详细信息，请参阅docs。

类似的东西：

<select name="updateCategory" ng-model="cat" ng-options="cat.id as cat.name for cat in selectedPermission.permission_categories">
</select>

请记住，我不确定您的数据结构，但这应该可以帮助您。

如何更改范围时如何更新ng-select？

1 个答案: