javascript - hide input values based on selected option in dropdown, ng-repeat ng-hide -

javascript - hide input values based on selected option in dropdown, ng-repeat ng-hide -

without jquery i'd able hide form input fields when selection made in <select> drop downwards menu.

similar this behavior, ng-repeat. , little more dynamic, making ng-hide utilize sort of ishidden function calling ng.models attributes, comparing selected value

here's attempt: http://jsfiddle.net/td2nz/260/, ng-hide beingness ng-hide="address.state === 'fl'"

the === fl part hardcoding "fl", i'd draw input beingness repeated in ng-repeat.

fiddle: http://jsfiddle.net/td2nz/261/

a couple things note: way determine if hidden should property of input hidden, not select menu option. had attribute in drop downwards affects: xxx, attribute of input: hiddenby: xxx. hide label ng-hide has been moved <div> tag. should started. resource helped solve problem http://plnkr.co/edit/sxivt4kthwltwvh3pnoh?p=preview

the jsfiddle provided works, if want work hardcoded "fl" alter === ==. === checks type , value, want check value equal. best practice utilize ===, in scenario should utilize ==.

angular var myapp = angular.module('myapp', []); myapp.controller('myctrl', function($scope) { $scope.addresses = [ {'state': 'al'}, {'state': 'ca'}, {'state': 'fl'} ]; $scope.lov_state = [ {'lookupcode': 'al', 'description': 'alabama'}, {'lookupcode': 'fl', 'description': 'florida'}, {'lookupcode': 'ca', 'description': 'california'}, {'lookupcode': 'de', 'description': 'delaware', 'affects': 'hidden'} ]; $scope.inputs_text = [ {label: "start date", input:'yyyy-mm-dd', name:'dat_start', isrequired: "true"}, {label: "end date", input:'yyyy-mm-dd', name:'dat_end', isrequired: "true"}, {label: "hide_for_fl", input:'wow', name:'hidden', isrequired: "true", hiddenby: 'fl'} ]; $scope.ishidden = function(){ homecoming message = (address.state === 'fl'); }; }); html <div ng-controller="myctrl"> <div>billing state: <select ng-model="address.state" ng-options="state.lookupcode state.description state in lov_state" ng-init="address.state=1"></select> <p> address.state: {{address.state}}</p> </div> <br> <tt>state selected: {{address.state}}</tt> <div ng-repeat="input in inputs_text" ng-hide="(input.hiddenby == address.state)"> <label>{{input.label}}</label> <input name="{{input.name}}" id="{{input.name}}" ng-model="input.input" ng-require="input.isrequired"></input> <!-- function -- find address.state in array, when match found affects alternative , if equals input.input homecoming true --> <p> input: {{input.input}}</p> </div> </div>

javascript angularjs