Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

hiding an option in ng-options

I'm pretty new to Angular and trying the ng-options. In my controller, I have:

$scope.permissionLevels = [
    { value: "ROLE_READ", text: "Read Only" },
    { value: "ROLE_WRITE", text: "Write" }
];

In my template, I have:

<select ng-options="permissionLevel.text for permissionLevel in permissionLevels"
        ng-model="selectedValue"></select>

Depending on the view, I want to hide either Read or Write. So in my controller, I have another flag that indicates what view it is. Before I used ng-options, I had a normal select drop down and did something like this:

<select>
    <option>Read Only </option>
    <option ng-show="shouldShowWrite">Write </option>
</select>

Is there a way to do this with ng-options? Thanks.

like image 980
Crystal Avatar asked Jul 15 '14 14:07

Crystal


2 Answers

Consider ngRepeat for that level of control. I don't think it's possible with ngOptions.

 <select ng-model="selectedValue">
    <option ng-repeat="permissionLevel in permissionLevels" value="{{permissionLevel.text}}" ng-show="shouldShowWrite(permissionLevel)">
      {{permissionLevel.text}}
    </option>
  </select>
like image 150
davidmdem Avatar answered Oct 13 '22 22:10

davidmdem


You could use a filter in the ngOptions expression:

<select ng-model="selectedValue"
        ng-options="permissionLevel.text for permissionLevel in 
                    permissionLevels | filter:shouldShow">
</select>

and define the shouldShow() function to $scope in the controller:

$scope.shouldShow = function (permissionLevel) {
  // put your authorization logic here
  return $scope.permission.canWrite || permissionLevel.value !== 'ROLE_WRITE';
}

For the full example see: http://plnkr.co/edit/8FkVktDXKGg3MQQawZCH

like image 39
runTarm Avatar answered Oct 13 '22 23:10

runTarm