Angular - ng-change не работает при смене селектора

Question

Angular - ng-change не работает при смене селектора

0

Функция getUpdates не вызывается при замене блока выбора.
Я добавил директиву ng-change но он не работает.
Что не так?

Controller

var app = angular.module('qconvertctrlmodule', [])
.controller('QConvertController', function($scope, $http, $log) {

    $scope.currencyObject = {};

    $scope.currencyObject.from;

    $scope.currencyObject.to;

    $scope.currencyObject.amount;

    $scope.currencyObject.amount_converted;

    $scope.currencyObject.getUpdates = function() {

        console.log("UPDATED!");

        $scope.currencyObject.from;

        $scope.currencyObject.to;

    };

    $scope.getconvertedrate = function() {

        $log.info("FROM : " + $scope.currencyObject.from);

        $log.info("TO : " + $scope.currencyObject.to);

        $http.get("http://api.decoded.cf/currency.php", {params : {from : $scope.currencyObject.from,
            to : $scope.currencyObject.to, amount : $scope.currencyObject.amount}})
            .then(function(response) {
                $scope.currencyObject.amount_converted = response.data.amount_converted;
                $log.info(response.data.amount_converted);
            });

    };

});

index.html

<!DOCTYPE html>
<html lang="en" ng-app="QConvert">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
  <title>Currency Converter</title>

  <!-- CSS  -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">QConvert</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="#">Home</a></li>
      </ul>

      <ul id="nav-mobile" class="side-nav">
        <li><a href="#">Home</a></li>
      </ul>
      <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
    </div>
  </nav>
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <h1 class="header center orange-text">QConvert</h1>
      <div class="row center">
        <h5 class="header col s12 light">A Seamless Currency Converter</h5>
      </div>
    </div>
  </div>
  <div class="container" ng-controller="QConvertController">
    <div class="section">
      <div class="row">
        <form class="col s12">
          <div class="row">
             <div class="input-field col s6 offset-s3">
              <input placeholder="" id="amount" type="number" step="any" class="validate" ng-model="currencyObject.amount">
              <label for="first_name">Amount</label>
            </div>
            <div class="input-field col s6 offset-s3">
              <select id="currency_from" ng-model="currencyObject.from" ng-change="getUpdates()">
                <option value="INR">Indian Rupee</option>
                <option value="USD">US Dollar</option>
                <option value="GBP">British Pound</option>
              </select>
              <label>From</label>
            </div>
            <div class="input-field col s6 offset-s3">
              <select id="currency_to" ng-model="currencyObject.to" ng-change="getUpdates()">
                <option value="INR">Indian Rupee</option>
                <option value="USD">US Dollar</option>
                <option value="GBP">British Pound</option>
              </select>
              <label>To</label>
            </div>
          </div>
          <a class="waves-effect waves-light btn col s6 offset-s3" ng-click="getconvertedrate()">Convert</a>
        </form>
        <p class="flow-text col s6 offset-s3 center" id="converted_amount">{{currencyObject.amount_converted}}</p>
      </div>
    </div>
  </div>
  <br><br>

  <footer class="page-footer orange">
    <div class="container">
      <div class="row">
        <div class="col l6 s12">
          <h5 class="white-text">About QConvert</h5>
          <p class="grey-text text-lighten-4">QConvert is a currency converter. It supports more than 25 currencies.</p>


        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Settings</h5>
          <ul>
            <li><a class="white-text" href="#!">Link 1</a></li>
            <li><a class="white-text" href="#!">Link 2</a></li>
            <li><a class="white-text" href="#!">Link 3</a></li>
            <li><a class="white-text" href="#!">Link 4</a></li>
          </ul>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text">Connect</h5>
          <ul>
            <li><a class="white-text" href="#!">Link 1</a></li>
            <li><a class="white-text" href="#!">Link 2</a></li>
            <li><a class="white-text" href="#!">Link 3</a></li>
            <li><a class="white-text" href="#!">Link 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Rahul Shaw</a>
      </div>
    </div>
  </footer>


  <!--  Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>
  <script type="text/javascript" src="lib/angular.min.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/qconvertctrl.js"></script>
  <script type="text/javascript">
      $(document).ready(function() {
        $('select').material_select();
      });
  </script>
  </body>
</html>

Abdul Moiz Khan 28 июль 2016, в 09:56

Источник

Теги:

angularjs

angularjs-ng-change

2 ответа

Ещё вопросы

Abdul Moiz Khan · Answer 1 · 2016-07-28T05-43-00.000Z

Это не работает, поскольку getUpdates() является дочерней функцией объекта $scope.currencyObject

Вы можете изменить файл Controller или Index файл, чтобы сделать эту работу.

В вашем Controller измените эту функцию

$scope.currencyObject.getUpdates = function() {

    console.log("UPDATED!");

    $scope.currencyObject.from;

    $scope.currencyObject.to;

};

К этой функции

$scope.getUpdates = function() {

    console.log("UPDATED!");

    $scope.currencyObject.from;

    $scope.currencyObject.to;

};

ИЛИ Альтернативно:

В вашем Index измените это:

 <select id="currency_from" ng-model="currencyObject.from" ng-change="getUpdates()">
            <option value="INR">Indian Rupee</option>
            <option value="USD">US Dollar</option>
            <option value="GBP">British Pound</option>
  </select>

К этому:

  <select id="currency_from" ng-model="currencyObject.from" ng-change="currencyObject.getUpdates()">
            <option value="INR">Indian Rupee</option>
            <option value="USD">US Dollar</option>
            <option value="GBP">British Pound</option>
  </select>

Надеюсь это поможет. По любым дополнительным запросам спрашивайте. Спасибо.

Romesh Jain · Answer 2 · 2016-07-28T06-41-00.000Z

Ваши getUpdates находятся внутри currencyObject

Попробуйте вызвать currencyObject.getUpdates

ng-change="currencyObjectgetUpdates()"