javascript - 当范围更改时，如何让 ng-select 进行更新？

Question

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

我错过了什么？如何才能直观地显示正确的选项？

<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>

这是 Controller 中正在更新范围的函数。

         $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>

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