Je suis nouveau sur Angular et j'essaye d'obtenir la valeur du bouton radio que l'utilisateur a sélectionné en utilisant ng-model. Mais je n'obtiens aucune sortie dans "contact sélectionné".
Voici mon HTML
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.2.0rc1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form name="myForm" ng-controller="Ctrl">
<table border="0">
<th>Contact Type</th>
<tr ng-repeat="contact in contacttype"><td>
<input type="radio" ng-model="contactname" name="group1" value="{{contact.name}}">{{contact.name}}
</td>
</td></tr></table>
<tt>selected contact = {{contactname}}</tt><br/>
</form>
</body>
</html>
Ci-dessous est mon main.js
function Ctrl($scope) {
$scope.contacttype = [
{name: 'Both' },
{name: 'User'},
{name: 'Admin'}
];
}
Qu'est-ce que je fais mal ici? Pas en mesure de comprendre !!!
Car ng-repeat
crée sa propre portée et ce que vous essayez de faire est d'assigner la valeur à la portée parent à partir de la portée enfant. Vous pouvez donc faire
<input type="radio" ng-model="$parent.contactname" name="group1" value="{{contact.name}}">
J'ai donc eu ce même problème et l'utilisation de $ parent avec ng-model ne semblait pas fonctionner. Mon problème était que j'avais des groupes de cases à cocher mais que j'utilisais le même attribut de nom pour chacun d'eux. Il a fini par masquer le bouton radio coché par défaut dans le dernier groupe.
Assurez-vous que vous utilisez des attributs de nom distincts pour chaque groupe distinct.
si vous utilisez plusieurs fois la directive et que vous utilisez for
et id
avec des étiquettes ... Assurez-vous d'utiliser une référence au $id
<li ng-repeat='add_type in types'>
<input id="addtester_{{ add_type.k }}_{{ $parent.$id }}" type="radio" ng-model="$parent.addType" ng-value='add_type.k' class="tb-form__input--custom" /
<label for="addtester_{{ add_type.k }}_{{ $parent.$id }}">{{ add_type.v }}</label>
</li>
Sinon, vous aurez eu des directives partageant les mêmes entrées et les faire apparaître comme si elles ne fonctionnaient pas.
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.devices = [{
nameD: "Device 1"
}, {
nameD: "Device 2"
}, {
nameD: "Device 3"
}, {
nameD: "Device 4"
}];
});
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app-controller-r.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<ul>
<li ng-repeat="device in devices">
<label>{{device.nameD}}
<input type="radio" ng-model="$parent.deviceType" value="{{device.nameD}}" />
</label>
</li>
</ul>
<button>Submit</button>
</form>
{{deviceType}}
</div>
</body>
</html>