Как передать значение области в свойство `value` элемента <input> - PullRequest
Новая
       1

Как передать значение области в свойство `value` элемента <input>

1 голос
/ 01 мая 2019

Я хочу передать значение области скрытому типу ввода, но не могу передать

У меня есть один выпадающий список. Я хочу передать переменную области в тип ввода, но он не работает.Вместо 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

Ответы [ 3 ]

1 голос
/ 02 мая 2019

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.

Любой код, который должен использовать новые значения, должен быть соответствующим образом задержан.

Для получения дополнительной информации см.

ДЕМО 

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>
1 голос
/ 01 мая 2019

Удалите {{}} и используйте ng-value вместо value. 

<input type="hidden" name="premium" ng-value="premiumVal" onchange="save('atgb')">
0 голосов
/ 02 мая 2019

Звучит так, как будто вы можете создать изолированную область видимости где-то внутри вашего шаблона.Это может быть создано ngIf среди прочего.Вам может понадобиться «волшебная точка». 

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


<input type="hidden" name="premium" ng-value="info.premiumVal" onchange="save('atgb')">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...