angularjs – Angular-Strap单选按钮不会更新模型

前端之家收集整理的这篇文章主要介绍了angularjs – Angular-Strap单选按钮不会更新模型前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在我的代码中看到一个单选按钮组.我使用AngularJs,Angular-Strap和Bootstrap.

问题是,当我点击另一个按钮时,控制器中的变量不会更新.默认值已设置.
如果我删除输入标签周围的标签,更新发生…我不知道这是一个错误,或者我是否做错了什么..

我希望我提供了你需要的任何信息.
谢谢你的帮助!!

版本:
AngularJS:1.2.16
AngularStrap:2.0.2
Bootstrap:3

HTML

  1. <link href="Content/bootstrap.min.css" rel="stylesheet" />
  2. <link href="Content/style.css" rel="stylesheet" />
  3. <link href="Content/bootstrap-additions.css" rel="stylesheet" />
  4. <link rel="stylesheet" href="//rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css">

单选按钮:

  1. <label class="control-label">Group By:</label>
  2.  
  3. <div class="btn-group" ng-model="groupBy.value" data-bs-radio-group>
  4. <label class="btn btn-default" for="all">
  5. <input name="all" type="radio" class="btn btn-default" value="all">
  6. All
  7. </label>
  8.  
  9. <label class="btn btn-default" for="room">
  10. <input name="room" type="radio" class="btn btn-default" value="room">
  11. Room
  12. </label>
  13.  
  14. <label class="btn btn-default" for="category">
  15. <input name="category" type="radio" class="btn btn-default" value="category">
  16. Category
  17. </label>
  18. </div>

二手图书馆:

  1. <script src="libraries/angular.min.js"></script>
  2. <script src="libraries/jquery.min.js"></script>
  3.  
  4. <!-- UI Libs -->
  5. <script src="libraries/bootstrap.min.js"></script>
  6. <script src="libraries/angular-strap.min.js"></script>
  7. <script src="libraries/angular-strap.tpl.min.js"></script>

控制器:

  1. $scope.groupBy = {
  2. value: 'room'
  3. };

更新:

模块定义:

  1. var app = angular.module('deviceApp',['ngRoute','mgcrea.ngStrap','ngAnimate']);
  2. app.config(function ($routeProvider) {
  3. $routeProvider
  4. .when('/devices',{
  5. controller: 'DeviceController',templateUrl: '/app/partials/devices.html'
  6. })
  7. .otherwise({ redirectTo: '/devices' });
  8. });
  9.  
  10. app.controller('DeviceController',function ($scope,$log,$alert,deviceService) {
  11. $scope.groupBy = {
  12. value: 'room'
  13. };
  14. ...
  15.  
  16. <html data-ng-app="deviceApp">
  17. ...
在我看到这个工作的plnkr之后,我将我的代码逐个粘贴到它中.
既然它仍然有效,我就像我恶作剧或其他东西一样……

因此,在loooooong试错阶段后,我发现了差异……

如果我在包含bootstrap.min.js之后包含jquery.js我得到错误,Bootstrap的JavaScript需要jQuery.这导致了这种情况,引导程序未被包括在内并且一切正常.

在我开发的某个时候,我需要Bootstrap.min.js,但我注意到了,我不再需要它了.可能其他一些文件现在可以完成这项工作.因此删除bootstrap.min.js文件解决了这个问题.

猜你在找的Angularjs相关文章