Angularjs ng-модель на входе не обновляет значение в контроллере - PullRequest
Новая
       36

Angularjs ng-модель на входе не обновляет значение в контроллере

0 голосов
/ 27 февраля 2019

Может кто-нибудь объяснить мне, почему, когда я печатаю console.log($scope.inputvalue), переменная не обновляется со значениями, которые я ввожу в input?

Может быть, я просто неправильно понял значение ng-model, в данном случае, как передать значение из представления в контроллер? 

(function () {
'use strict';

angular.module('LunchCheck', [])
.controller('checkiftoomuch', ['$scope', checkiftoomuch]);

function checkiftoomuch($scope){
    $scope.inputvalue = "";
    console.log($scope.inputvalue);
}

})();
<!doctype html>
<html lang="en" ng-app="LunchCheck">
  <head>
    <title>Lunch Checker</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="styles/bootstrap.min.css">
    <style>
      .message { font-size: 1.3em; font-weight: bold; }
    </style>
  </head>
<body>
   <div class="container" ng-controller="checkiftoomuch">
     <h1>Lunch Checker</h1>

         <div class="form-group">
             <input id="lunch-menu"
             type="text"
             placeholder="list comma separated dishes you usually have for lunch"
             class="form-control"
             ng-model="inputvalue">
         </div>
         <div class="form-group">
             <button class="btn btn-default">Check If Too Much</button>
         </div>
         <div class="form-group message">
           Total number of disches: {{ inputvalue }}
         </div>
   </div>

</body>
</html>

1 Ответ

0 голосов
/ 27 февраля 2019

Вы устанавливаете $scope.inputvalue = ""; перед console.log.Но после изменения значения вам нужно console.log снова.Попробуйте использовать: 

function checkiftoomuch($scope){
    $scope.inputvalue = "";
    console.log($scope.inputvalue);

    $scope.$watch('inputvalue', function(newValue, oldValue){
        console.log(newValue);
    })
}

Или добавьте функцию по нажатию кнопки, например: 

<div class="form-group">
    <button class="btn btn-default" ng-click="showValue()>Check If Too Much</button>
</div>

А в JS: 

function checkiftoomuch($scope){
    $scope.inputvalue = "";
    console.log($scope.inputvalue);

    $scope.showValue = function(){
        console.log($scope.inputvalue);
    }
}

AngularJS имеет двусторонние данныеПривязка означает, что значения в представлении и контроллере всегда синхронизированы, их не нужно передавать взад и вперед.

...