6
Desidero avere un gruppo di pulsanti di opzione come è possibile vedere nel mio codice. Uso AngularJs, Angular-Strap e Bootstrap.Il pulsante radio con cinturino angolare non aggiornerà il modello
Il problema è che le mie variabili nel controller non si aggiornano quando faccio clic su un altro pulsante. Il valore predefinito è impostato. Se rimuovo le etichette attorno ai tag di input, l'aggiornamento si verifica ... Non so se questo è un bug, o se sto facendo qualcosa di sbagliato ..
Spero di aver fornito tutte le informazioni di cui hai bisogno. Grazie per l'aiuto !!
Versioni: AngularJS: 1.2.16 AngularStrap: 2.0.2 Bootstrap: 3
HTML:
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/style.css" rel="stylesheet" />
<link href="Content/bootstrap-additions.css" rel="stylesheet" />
<link rel="stylesheet" href="//rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css">
Radio Button:
<label class="control-label">Group By:</label>
<div class="btn-group" ng-model="groupBy.value" data-bs-radio-group>
<label class="btn btn-default" for="all">
<input name="all" type="radio" class="btn btn-default" value="all">
All
</label>
<label class="btn btn-default" for="room">
<input name="room" type="radio" class="btn btn-default" value="room">
Room
</label>
<label class="btn btn-default" for="category">
<input name="category" type="radio" class="btn btn-default" value="category">
Category
</label>
</div>
librerie utilizzate:
<script src="libraries/angular.min.js"></script>
<script src="libraries/jquery.min.js"></script>
<!-- UI Libs -->
<script src="libraries/bootstrap.min.js"></script>
<script src="libraries/angular-strap.min.js"></script>
<script src="libraries/angular-strap.tpl.min.js"></script>
Controller:
$scope.groupBy = {
value: 'room'
};
Aggiornamento:
modulo Definizione:
var app = angular.module('deviceApp', ['ngRoute','mgcrea.ngStrap','ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider
.when('/devices',
{
controller: 'DeviceController',
templateUrl: '/app/partials/devices.html'
})
.otherwise({ redirectTo: '/devices' });
});
app.controller('DeviceController', function ($scope, $log, $alert, deviceService) {
$scope.groupBy = {
value: 'room'
};
...
<html data-ng-app="deviceApp">
...
Perché ti serviva l'attributo 'for' delle etichette? Puoi rimuoverli? Il codice può funzionare semplicemente rimuovendo l'attributo 'for' delle etichette. –
Puoi mostrare come si definisce il modulo? – tasseKATT
L'etichetta'for' era solo un esperimento. Ho pensato che forse avrebbe inoltrato il clic all'ingresso radio ... Non funziona anche senza. – Bagorolin