Hide and Show elements based on values in Array in AngularJS

Question

I have the following HTML code:

<div ng-controller="DemoController">
            <label class="list-group-item" ng-repeat="option in DesignOptions">
                <input type="radio" name="optionsRadios" value="{{option[0]}}" />
                {{option[1]}}</label>


            <label class="list-group-item" ng-repeat="option in StyleOptions">
                <input type="checkbox" value="{{option[1]}}">
                {{option[2]}}
            </label>
        </div

And I have the following AngularJS code:

<script type="text/javascript">
        var app = angular.module('myApp', []);

        app.controller('DemoController', function ($scope) {

            var json = '{"Table":[[4,"Full"],[5,"Half"]],"Table1":[[4,1,"Elbow Patch"],[5,2,"Roll Up"]]}';
            var obj = $.parseJSON(json);

            $scope.DesignOptions = obj.Table;
            $scope.StyleOptions = obj.Table1;

        });
    </script>

This gives me the following result:

enter image description here

Now, I need to display Elbow Patch checkbox only when Full radio button is selected. And Roll Up when Half radio button is selected. This is because, if you see obj.Table array, it has id of '4' for Full and obj.Table1 has id of '4' for Elbow Patch and so on.

I tried Angularjs - showing element based on a presence of id in array but could not modify it to work in my case as my array is very different.

Gruff Bunny · Accepted Answer · 2014-01-17 18:51:02Z

1

Add a new property to your controller which will store the selected design option:

$scope.designOption = 4;    // default to Full

Add the binding to this property in the view:

<input ng-model="$parent.designOption" type="radio" value="{{option[0]}}" />

Add an ng-show directive to the checkbox label:

<label ng-repeat="option in StyleOptions" ng-show='option[0] == designOption'>

I've removed the class and name attributes from the element just to make the code clearer.

NB Need to reference the $parent scope on the radio input as the ng-repeat directive will create a scope for each repeated element and javascript prototypical inheritance rules means that using just 'designOption' will create a designOption property on the child scope and not use the one in your controller.

answered Jan 17, 2014 at 18:51

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pawan Pillai Over a year ago

WOW.. works perfectly.. I am from jQuery and just started AngularJS. Kind of hard to understand how bindings are working. Thanks a lot.

Pawan Pillai Over a year ago

Works perfectly with $parent. Does not work without it.

Collectives™ on Stack Overflow

Hide and Show elements based on values in Array in AngularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related