CODEWITHSUNDEEP
javascriptangularjs
Jason Spick
Jason Spick

Reputation: 6098

How do I get ng-select to update when scope is changed?

I have a table above a form, that when a row is selected it populates a form with data. That form has a select element. Upon the first row in the table being selected, the data populates correctly and the correct selected option is shown. On the second and subsequent selection the correct selected option is not shown. In chrome dev tools I can see the values update properly, but it is not visually shown.

What am I missing? How do I get that correct option to be visually shown?

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

Here is function in controller that is updating the scope.

         $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 = {};
            }
        });

Upvotes: 0

Views: 134

Answers (1)

Jax
Jax

Reputation: 1843

I would use ng-options as opposed to <option...></option> you can then relate your selection to your ng-model easily. See docs for more info.

Something like:

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

bear in mind I am not sure of you data structure, but this should get you on your way.

Upvotes: 2

Related Questions