angularjs click on label text disappears


Questions › angularjs click on label text disappears
2 Vote Up Vote Down
IVIR3zaM Asked

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'
    }
]
}]);
Comments :
Manu replied

Use normal javascript. - a click event listener that sets the css style to display = none


1 Answers :
1 Vote Up Vote Down
Farzad YZ answered

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">