javascript - 如何将范围值传递给 <input> 元素 `value` 属性

标签 javascript html angularjs

我想将范围值传递给隐藏的输入类型,但无法传递

我有一个下拉列表,我想将范围变量传递给输入类型,但它不起作用。代替 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 - 如何将范围值传递给 &lt;input&gt; 元素 `value` 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55934096/

相关文章:

javascript - 如何使用 Javascript 关键字作为变量名?

html - 在单选按钮文本附近没有对齐。它有点提升

javascript - 如何在 jquery 中从多个选择器创建对象?

AngularJS 在只读字段中格式化日期

javascript - 如何停止 AngularJS 中所有正在进行的 Ajax 调用

php - 我的 ajax 代码没有从 php 发送每一行

javascript - 如何替换特定字符之前的文本(正则表达式)

javascript - ES6 类在 ExpressJS 中的行为不同?

html - 100% 宽度的 Twitter Bootstrap 3 模板

twitter-bootstrap - 带 Angular 的可点击 Bootstrap 行