angularjs - navigationend - title angular 6
El botón de radio de correa angular no actualizará el modelo (1)
Quiero tener un grupo de botones de radio como puedes ver en mi código. Yo uso AngularJs, Angular-Strap y Bootstrap.
El problema es que mis variables en el controlador no se actualizarán cuando haga clic en otro botón. El valor predeterminado está establecido. Si elimino las etiquetas alrededor de las etiquetas de entrada, la actualización ocurre ... No sé si esto es un error, o si estoy haciendo algo mal ...
Espero haberle proporcionado la información que necesita. ¡¡Gracias por cualquier ayuda!!
Versiones: 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">
Boton de radio:
<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>
Bibliotecas usadas:
<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>
Controlador:
$scope.groupBy = {
value: ''room''
};
Actualizar:
Definición del módulo:
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">
...
Después de ver este trabajo plnkr pegué mi código en parte por parte. Como todavía funcionaba, me sentí como si me regañaran o algo así ...
Entonces, después de una larga fase de prueba y error, descubrí LA diferencia ...
Si incluyo el jquery.js después de incluir bootstrap.min.js obtengo el error, el JavaScript de Bootstrap requiere jQuery. Esto resultó en el caso, que el bootstrap no se incluyó correctamente y todo funcionó.
En algún momento de mi desarrollo necesité Bootstrap.min.js, pero noté que ya no lo necesitaba. Probablemente algún otro archivo ahora haga ese trabajo. Así que eliminar el archivo bootstrap.min.js resolvió el problema.