Question

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

我有一个下拉列表，我想将范围变量传递给输入类型，但是它不起作用。代替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

Answer 1

删除{{}}并使用ng-value代替value。

<input type="hidden" name="premium" ng-value="premiumVal" onchange="save('atgb')">

Answer 2

AngularJS通过提供自己的事件处理循环来修改常规JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才能受益于AngularJS数据绑定，异常处理，属性监视等。

当控制器更新范围时，更改不会立即传播到输入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事件循环更新属性 value。

$timeout函数延迟了console.log语句，允许浏览器事件循环更新 value。

任何需要使用新值的代码都需要适当延迟。

有关更多信息，请参见

AngularJS Developer Guide - Integration with the browser event loop

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>

Answer 3

听起来您可能在模板中的某个位置创建了一个孤立的作用域。可以通过ngIf等创建。您可能需要“魔点”。

$scope.info = {}
...
$scope.info.premiumVal = response.data[0].premiumVal;


<input type="hidden" name="premium" ng-value="info.premiumVal" onchange="save('atgb')">

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

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

3 个答案:

The DEMO