I'm newbie in angularjs and have an application, and wanna show a list of radio inputs. when user click on one of them the label text disappears. th html and js below:
html
<form>
<ul class="list-unstyled">
<li ng-repeat="domain in domains track by $index">
<input type="radio" name="domain" id="{{$index}}" ng-model="domain">
<label for="{{$index}}" ng-bind="domain.name"></label>
</li>
</ul>
<input class="btn btn-success" value="Submit" type="submit">
controller
app.controller('domainsCtrl', ['$scope', '$http', function($scope, $http){
$scope.domains = [
{
name: 'smart.ir'
},
{
name: 'idiot.com'
},
{
name: 'smartalec.net'
}
]
}]);
1 Answers :
The problem you are struggling with is because in your ng Repeat directive all your radio inputs are having the same ng Model directive. It is not allowed to use same ng Model directive for more than 1 element in angularjs. You could easily differentiate ng Models usinf $index. just use this one:
<form>
<ul class="list-unstyled">
<li ng-repeat="domain in domains track by $index">
<input type="radio" name="domain" id="{{$index}}" ng-model="domain{{$index}}">
<label for="{{$index}}" ng-bind="domain.name"></label>
</li>
</ul>
<input class="btn btn-success" value="Submit" type="submit">
Use normal javascript. - a
click
event listener that sets the css style todisplay = none