Angularjs 引导4';数据切换';防止AngualrJS模型更新
我已经看到这是Bootstrap3的一个问题,没有正式的修复,但是Bootstrap4没有提到 数据切换用于无线电输入,当数据切换打开输入时,AJS型号不会更新,但如果没有数据切换,则会更新。 另外,如果不使用数据切换,则不会对选定的单选选项应用任何切换影响Angularjs 引导4';数据切换';防止AngualrJS模型更新,angularjs,bootstrap-4,Angularjs,Bootstrap 4,我已经看到这是Bootstrap3的一个问题,没有正式的修复,但是Bootstrap4没有提到 数据切换用于无线电输入,当数据切换打开输入时,AJS型号不会更新,但如果没有数据切换,则会更新。 另外,如果不使用数据切换,则不会对选定的单选选项应用任何切换影响 <html ng-app="testApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible
<html ng-app="testApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!--ISSUE SCRIPT - data-toggle -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<form>
<!-- YES/NO -->
<div class="form-group required">
<label class="input-label">Do you have any debt?</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" name="HasDebt" autocomplete="off"
ng-value="true"
ng-model="User.HasDebt"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="HasDebt" autocomplete="off"
ng-value="false"
ng-model="User.HasDebt"> No
</label>
</div>
</div>
Value: {{User.HasDebt}}
</form>
</body>
</html>
你有债务吗?
对
不
值:{{User.hasdebent}
您使用的AngularJS版本似乎与jQuery不兼容。请更换为最新版本。下面是index.html文件:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- JS -->
<!--ISSUE SCRIPT - data-toggle -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<form>
<!-- YES/NO -->
<div class="form-group required">
<label class="input-label">Do you have any debt?</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" name="HasDebt" autocomplete="off"
ng-value="true"
ng-model="User.HasDebt"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="HasDebt" autocomplete="off"
ng-value="false"
ng-model="User.HasDebt"> No
</label>
</div>
</div>
Value: {{User.HasDebt}}
</form>
</body>
</html>
你有债务吗?
对
不
值:{{User.hasdebent}
希望有帮助。,因为引导依赖于jQuery。这没有帮助:(在引导脚本根本不起作用之前需要调用Jquery,因此将脚本放在底部而将BS脚本放在顶部意味着页面的行为就好像根本不存在BS脚本一样。将Jquery脚本放回顶部意味着模型没有更新,但BS脚本起作用:/I将此代码复制到您的p中lunkr,它对我来说很好,我尝试在引导之前调用jquery,但没有这样做。引导脚本没有运行,当你选择一个单选按钮时,没有应用选定的样式。与之相比,只显示了一般的BS4样式:没有指示选择哪个的单选按钮没有多大用处。angularjs您使用的版本1.4.0似乎与jquery不兼容。请用最新版本替换它,我已经更新了代码。ayyy很好,谢谢,我愚蠢地认为我是如何获得最新版本的。