我想在我的代码中看到一个单选按钮组.我使用AngularJs,Angular-Strap和Bootstrap.
问题是,当我点击另一个按钮时,控制器中的变量不会更新.默认值已设置.
如果我删除输入标签周围的标签,更新发生…我不知道这是一个错误,或者我是否做错了什么..
我希望我提供了你需要的任何信息.
谢谢你的帮助!!
版本:
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">
单选按钮:
- <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>
二手图书馆:
- <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>
控制器:
- $scope.groupBy = {
- value: 'room'
- };
更新:
模块定义:
- 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">
- ...