javascript - change - radio button angular 4
Botones de radio con filtro que usa ng-repeat en comportamiento angular inesperadamente (2)
** ng-value por documentos **
Vincula la expresión dada al valor de
<option>oinput[radio], de modo que cuando se selecciona el elemento, el ngModel de ese elemento se establece en el valor enlazado.
Utilice ng-value lugar del atributo de value para que el enlace sea viable con el ng-model respectivo en el botón de opción.
Además, el botón de opción (All) no necesita $parent anotación $parent . se debe usar directamente como ng-model="selectedCandy" , porque el botón de opción interno necesitará $parent porque queremos referir la variable del alcance del controlador.
Margen
<body ng-controller="candyController">
<input type="radio" ng-value="" checked="checked" ng-model="selectedCandy" name="Candy" />(All)
<div data-ng-repeat="candy in candyList">
<input type="radio" ng-value="candy.name" ng-model="$parent.selectedCandy" name="Candy" /> {{candy.name}}
</div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
<tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
<td>{{candy.name}}</td>
<td>{{candy.cost}}</td>
</tr>
</tbody>
</table>
</body>
Tengo 2 problemas que ocurren cuando uso botones de opción en angular.
Quiero el valor predeterminado cuando el usuario actualiza la página o la visita por primera vez para tener seleccionada la opción "Todos ()" (tengo la propiedad activada pero el valor predeterminado todavía no está allí)
Cuando hago clic en el botón de opción "Todo ()", muestra todos los elementos de la lista (como debería). El problema ocurre cuando hago clic en otro botón para filtrar con otra cadena; el problema es cuando hago clic en "Todo ()" de nuevo, el filtro parece ignorar que el botón "Todo ()" está seleccionado por completo.
Básicamente, quiero que el botón de opción Todo () muestre resultados sin filtrar.
Aquí está el plunker:
http://plnkr.co/edit/Bdaaq3cycKPt57h03LX7?p=preview
<body ng-controller="candyController">
<input type="radio" value="" checked="checked" ng-model="$parent.selectedCandy" name="Candy" />(All)
<div data-ng-repeat="candy in candyList">
<input type="radio" value="{{candy.name}}" ng-model="$parent.selectedCandy" name="Candy" />
{{candy.name}}
</div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
<tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
<td>{{candy.name}}</td>
<td>{{candy.cost}}</td>
</tr>
</tbody>
</table>
</body>
</html>
y aquí está el controlador
var app = angular.module(''angularjs-starter'', []);
app.controller(''candyController'', function($scope) {
$scope.candyList = [
{name:"lolipop", cost:10},
{name:"popsicle", cost:100},
{name:"ringpop", cost:50},
{name:"mint", cost:2},
{name:"chocolate", cost:85},
{name:"candycorn", cost:1}
];
});
Quiero el valor predeterminado cuando el usuario actualiza la página o la visita por primera vez para tener seleccionada la opción "Todos ()" (tengo la propiedad activada pero el valor predeterminado todavía no está allí)
Para esto, establecería la propiedad en el alcance en el controlador cuando se inicia: $scope.selectedCandy = "";
Cuando hago clic en el botón de opción "Todo ()", muestra todos los elementos de la lista (como debería). El problema ocurre cuando hago clic en otro botón para filtrar con otra cadena; el problema es cuando hago clic en "Todo ()" de nuevo, el filtro parece ignorar que el botón "Todos ()" está seleccionado por completo.
El problema parece ser con tu alcance. Apuntas a selectedCandy en el alcance $parent al repetir los botones de radio (lo cual es correcto porque el alcance de tu controlador está por encima del alcance de tu repetidor ).
Cuando usa $parent.selectedCandy en la radio fuera del repetidor, está mirando por encima de su alcance y no en el alcance del controlador.
Simplemente elimine $parent de la radio "todos".