Functioning of ng-change in angularJs

Question

Functioning of ng-change in angularJs

Navigation

#1 by (2 votes)
#2 by (2 votes)

0

I have a very simple select to try ng-change. It does not work with any function that you put. I left the alert for simplicity. What do I do wrong? I also do not find examples of its use I pass the code:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="PruebaController">

      <select ng-model="miProvinciaSeleccionada" 
        ng-options="provincia as provincia.nombre for provincia in provincias track by provincia.idProvincia"
        ng-change="alert('HOLA')" >
        <option value="">--Elige opcion--</option>
      </select>
      <br>
      El nombre de la provincia seleccionada es:{{miProvinciaSeleccionada.nombre}}

</body>

</html>

var app = angular.module("app", []);

app.controller("PruebaController", function($scope) {
  $scope.provincias=[
    {
      idProvincia:2,
      nombre:"Castellón"
    },
    {
      idProvincia:3,
      nombre:"Alicante"
    },
    {
      idProvincia:1,
      nombre:"Valencia"
    },
    {
      idProvincia:7,
      nombre:"Teruel"
    },  
    {
      idProvincia:5,
      nombre:"Tarragona"
    }
  ];

  $scope.miProvinciaSeleccionada={
      idProvincia:3,
      nombre:"Alicante"
    }

});

Thank you very much

angularjs

asked by Gema 07.03.2018 в 16:34

source

2 answers

Show array with hyphen instead of comma How to make a comment block in sublime text 3?

score 2 · Answer 1

The problem is that you have attached to the ng-change directive an expression that is not a AngularJS expression .

To make it work you must create this expression, for example, a function in the controller that is a "wrapper" of your JavaScript expression.

For example, like this:

html

ng-change="miAlert()"

Driver

$scope.miAlert = function() {
    alert('HOLA')
}

You might want to see AngularJS Expressions vs. JavaScript Expressions

score 2 · Answer 2

What you have to do is create a function associated with the $ scope to be recognized and used in the ng-change . Read the documentation of AngularJs

var app = angular.module("app", []);

app.controller("PruebaController", function($scope) {
  $scope.provincias=[
    {
      idProvincia:2,
      nombre:"Castellón"
    },
    {
      idProvincia:3,
      nombre:"Alicante"
    },
    {
      idProvincia:1,
      nombre:"Valencia"
    },
    {
      idProvincia:7,
      nombre:"Teruel"
    },  
    {
      idProvincia:5,
      nombre:"Tarragona"
    }
  ];
  
  $scope.ShowAlert = function (){
    alert("Se selecciono La provincia: " + $scope.miProvinciaSeleccionada.nombre);
  }

  $scope.miProvinciaSeleccionada={
      idProvincia:3,
      nombre:"Alicante"
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="PruebaController">

      <select ng-model="miProvinciaSeleccionada" 
        ng-options="provincia as provincia.nombre for provincia in provincias track by provincia.idProvincia"
        ng-change="ShowAlert()" >
        <option value="">--Elige opcion--</option>
      </select>
      <br>
      El nombre de la provincia seleccionada es:{{miProvinciaSeleccionada.nombre}}

</body>

</html>