我想将范围值传递给隐藏的输入类型,但无法传递
我有一个下拉列表,我想将范围变量传递给输入类型,但它不起作用。代替 PremiumVal,它应该得到 75
html
<input type="hidden" name="premium"
value={{premiumVal}}
onchange="save('atgb')">
<h1>{{premiumVal}}</h1>//its getting data
JS
$scope.premiumVal = response.data[0].premiumVal;//75
最佳答案
AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能从 AngularJS 数据绑定(bind)、异常处理、属性监视等中受益。
当 Controller 更新范围时,更改不会立即传播到输入 value
属性。首先,AngularJS 浏览器事件循环需要更新输入的 value
属性。然后浏览器事件循环需要根据新的 value
属性更新 value
属性。
app.controller("ctrl",function($scope,$timeout) {
$scope.premiumVal = "75";
elem = document.getElementById("my-hidden");
console.log("scope",$scope.premiumVal);
console.log("attr.value",elem.attributes.value);
console.log("elem.value",elem.value);
$scope.$evalAsync(function() {
//THESE ARE EXECUTED ON NEXT AngularJS framework tick
console.log("$evalAsync attr",elem.attributes.value);
console.log("$evalAsync elem",elem.value);
})
$timeout(function() {
//THESE ARE EXECUTED ON NEXT browser tick
console.log("$timeout attr",elem.attributes.value);
console.log("$timeout elem",elem.value);
})
})
$evalAsync函数延迟 console.log
语句,允许 AngularJS 事件循环更新 attribute value
。
$timeout函数延迟 console.log
语句,允许浏览器事件循环更新 element value
。
任何需要使用新值的代码都需要适当延迟。
有关详细信息,请参阅
The DEMO
angular.module("app",[])
.controller("ctrl",function($scope,$timeout) {
$scope.premiumVal = "75";
elem = document.getElementById("my-hidden");
console.log("scope",$scope.premiumVal); //scope 75
//console.log("attr.value",elem.attributes.value);
console.log("elem.value",elem.value); //elem.value {{premiumVal}}
$scope.$evalAsync(function() {
//console.log("$evalAsync attr",elem.attributes.value);
console.log("$evalAsync elem",elem.value); //$evalAsync elem {{premiumVal}}
})
$timeout(function() {
//console.log("$timeout attr",elem.attributes.value);
console.log("$timeout elem",elem.value); //$timeout elem 75
})
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<input id="my-hidden" type="hidden" name="premium"
value={{premiumVal}}>
<br>
<h1>{{premiumVal}}</h1>
</body>
关于javascript - 如何将范围值传递给 <input> 元素 `value` 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55934096/