JPMonge
JPMonge

Reputation: 11

How to only show an option in my select and then show all of them with AngularJS

i have a select with 5 options: Choose an option(default selection), level 1, level 2, level 3 and level 4. First i only want to show the options: choose an option and level 1, and when i click the option level 1 show me only the option level 2 and when i choose the option level 2 show me the option level 3, etc etc. i really dont know how to do it :(
here is my code:

app.controller("myController", ['$scope', function($scope){

$scope.niveles = [
    {id:1, "name": "Selecciona nivel"},
    {id:2, "name": "Nivel 1"},
    {id:3, "name": "Nivel 2"},
    {id:4, "name": "Nivel 3"}

];
$scope.nivelSeleccion = $scope.niveles[0];

$scope.table=['Table'];
$scope.rows=['Row'];
$scope.row=['Row'];
$scope.row.text = "Escribe un título";
$scope.counter = 1;

$scope.addRow = function() {
    $scope.rows.push('Row ' + $scope.counter);
    $scope.row.push('Row ' + $scope.counter);
    $scope.counter++;
}

}]);


<td>
   <select class="minimal" ng-model="nivelSeleccion"
   ng-options="nivel.name for nivel in niveles" ng-change="addRow()" ng-show="nivelSeleccion = niveles[0]" >
  </select>
                </td>

Upvotes: 1

Views: 79

Answers (4)

Frontend Friedrich
Frontend Friedrich

Reputation: 151

You can either write a watch for change on your ng-model value and alter the array inside the watch and rerender your site or:

Use the ngChange attribute and call a function that alters the array when you select an option.

You should hold the array twice in your controller in that case, in case you need to fall back or something.

Dont try to hide elements inside your input-dropdown, just alter the array.

Upvotes: 1

JMatthews
JMatthews

Reputation: 66

You can use the ng-options 'disable when' to disable specific options. I was able to do what you're asking for with this:

<select class="minimal" ng-model="nivelSeleccion" ng-options="nivel.id as nivel.name disable when nivel.id > (nivelSeleccion + 1) for nivel in niveles" ng-change="addRow()"></select>

I removed the ng-show for this example.

Upvotes: 1

n daniel
n daniel

Reputation: 148

ngShow doesn't manipulate the contents of your select box, but rather evaluates an expression to see if it is truthy, and if it is, it then shows/hides the element. So what you've initially written would show/hide the select based on the results of the expression nivelSeleccion = niveles[0]

If you want to show/hide table rows, then you can add the ng-show to the subsequent table rows.

<table>
<tr> <!--top row contains drop down list-->
    <td>
       <select class="minimal" ng-model="nivelSeleccion"
            ng-options="nivel.name for nivel in niveles" 
            ng-change="addRow()" />

    </td>
</tr>
    <tr ng-repeat="row in rows track by $index'
       ng-show="$index >= nivelSeleccion.id"><!--subsequent rows contain filtered results-->
        <td>{{row}}</td>
    </tr>
</table>

If you want to remove options available in the select list, then you might have the function your ng-change uses pop/splice the niveles array.

Upvotes: 1

Sa E Chowdary
Sa E Chowdary

Reputation: 2075

i think its not possible with angular select,its for selecting the input from the drop-down.once u select the input has been taken.can u make your requirement simple so that we can help out

Upvotes: 1

Related Questions