2015-08-05 2 views
1

Please see this relevant jsFiddleУгловое - нг-изменения не обстреливать выбора изменения

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

HTML:

<div ng-controller = "MyCtrl"> 
<p>Term</p> 
    <select id = "term" ng-change="test()"> 
    <option value="5">5</option> 
    <option value="10">10</option> 
    <option value="15">15</option> 
    </select>  

</div> 

JS:

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

app.controller('MyCtrl',['$scope','$element', function($scope, $element) { 

    $scope.test = function() { 
    alert ("changed!"); 
    } 


}]); 

ответ

4

У Вас есть некоторые проблемы.

Во-первых: <div ng-controller = "MyCtrl"> - у вас есть промежутки между ними.

Во-вторых, вы не объявляете свое приложение ng-app. Это потому, что вы устанавливаете свою скрипку как jquery, а не Angular. Если вы установили его в качестве угловых вы не должны были бы это в скрипке

Это ваша скрипка установка

This is your fiddle setup

Это угловая программе настройке скрипки

This is an Angular fiddle setup

В-третьих, для использования select с AngularJS вам необходимо иметь ng-model на теге select. В этом случае я просто использовал bob

<div ng-app="HelloApp"> <!-- declare your angular app. typically would go on body or html --> 
    <div ng-controller="MyCtrl"> 
     <p>Term</p> 
        <select ng-model="bob" ng-change="test()"> 
         <option value="5">5</option> 
         <option value="10">10</option> 
         <option value="15">15</option> 
        </select>  
    </div> 
</div> 



var app = angular.module('HelloApp', []); 
app.controller('MyCtrl',['$scope','$element', function($scope, $element) { 
console.log('ctrl working'); 
    $scope.test = function() { 
    alert ("changed!"); 
    }  
}]); 

Вот это рабочая скрипку http://jsfiddle.net/ctbLparv/

Кроме того, если ваше намерение состоит в том, чтобы просто установить свойство на основе выбора, вам не нужно использовать ng-change. Вы можете положиться на двустороннюю привязку.

Так, например, эта скрипка: http://jsfiddle.net/ps8jnyL8/

Нет выбора не вызывается. Мы также по умолчанию выбрали термин «10», когда он сначала загружается.

<div ng-app="HelloApp"> 
    <div ng-controller="MyCtrl"> 
    <p>Term</p> 
     <select ng-init="selectedTerm = '10'" ng-model="selectedTerm"> 
      <option value="5">5</option> 
      <option value="10">10</option> 
      <option value="15">15</option> 
     </select> 
     <p>Selected Term: {{selectedTerm}}</p>  
    </div> 
</div> 
1

Здесь работает JSFiddle:

https://jsfiddle.net/G8S32/1162/

Основное изменение добавлял эту строку:

ng-model="items" 

, который не делает ничего, кроме обновления модели и вызвать событие для стрельбы.

Заканчивать документацию для нг-изменения:

https://docs.angularjs.org/api/ng/directive/ngChange

Особенно эта линия:

Выражение ngChange вычисляется только при изменении значения входного вызывает новое значение быть приверженными модели.

+0

Не нужно использовать 'ng-options'. Они могут быть жестко закодированы, как в сообщении OP. – Darren

+0

Спасибо, я обновил свой ответ соответственно. – lintmouse

+0

Если он добавит 'ng-model' к своей скрипке, он все равно не сработает, поскольку он поставил свою скрипку с jquery и угловатой, как запоздалая мысль. Где у вас есть углы, так что вам не нужно ng-приложение. он все равно понадобился бы :) – Darren

Смежные вопросы