AngularJS - запускается при выборе переключателя

118

Я искал и пробовал много вариантов типа ng-xxxx, но не смог найти тот .. Я просто хочу вызвать некоторую функцию в контроллере, когда выбран переключатель.

Так что это может быть похоже на следующее .. (Конечно, приведенный ниже код не работает)

<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>

Есть ли способ добиться того, чего я хочу?

angularjs MomentH
источник

231

Существует как минимум 2 различных метода вызова функций при выборе переключателя:

1) Использование ng-changeдирективы:

<input type="radio" ng-model="value" value="foo" ng-change='newValue(value)'>

а затем в контроллере:

$scope.newValue = function(value) {
     console.log(value);
}

Вот jsFiddle: http://jsfiddle.net/ZPcSe/5/

2) Смотрю модель на предмет изменений. Для этого не требуется ничего особенного на уровне ввода:

<input type="radio" ng-model="value" value="foo">

но в контроллере будет:

$scope.$watch('value', function(value) {
       console.log(value);
 });

И jsFiddle: http://jsfiddle.net/vDTRp/2/

Более подробная информация о вашем варианте использования поможет предложить адекватное решение.

pkozlowski.opensource
источник

6

Я использую привязки AngularJS Bootstrap. Watch не работает, но обработчик ng-change работает.

zmbq

46

Есть ли способ использовать одну директиву ng-change для радиогруппы?

jEremyB

20

Это слово valueсбивает с толку.

Vibhor Dube

1

@jEremyB .. Я не знаю ng-changeконкретно об одном ... но вы можете избежать использования нескольких обработчиков событий (например, наличия ng-change=...на каждом input), используя метод 2: каждый ввод требует, ng-modelа затем у вас есть одно watchпрослушивание для изменить ...

dsdsdsdsd

почему бы не нажать ng-click?

Цагана Нохаева

19

Следует использовать ngChange вместо ngClick, если источник триггера не от щелчка.

Это то, что вы хотите? что именно не работает в вашем случае?

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

function MyCtrl($scope) {
    $scope.value = "none" ;
    $scope.isChecked = false;
    $scope.checkStuff = function () {
        $scope.isChecked = !$scope.isChecked;
    }
}


<div ng-controller="MyCtrl">
    <input type="radio" ng-model="value" value="one" ng-change="checkStuff()" />
    <span> {{value}} isCheck:{{isChecked}} </span>
</div>

maxisam
источник

4

Это работает только для кликов. Что, если use устанавливает переключатель с помощью клавиатуры?

Rodrigo-Silveira

8

В более новых версиях angular (я использую 1.3) вы можете в основном установить модель и значение, а двойная привязка выполняет всю работу, этот пример работает как шарм:

angular.module('radioExample', []).controller('ExampleController', ['$scope', function($scope) {
  $scope.color = {
    name: 'blue'
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<html>
<body ng-app="radioExample">
<form name="myForm" ng-controller="ExampleController">
  <input type="radio" ng-model="color.name" value="red">  Red <br/>
  <input type="radio" ng-model="color.name" value="green"> Green <br/>
  <input type="radio" ng-model="color.name" value="blue"> Blue <br/>
  <tt>color = {{color.name}}</tt><br/>
 </form>
  </body>
</html>

Развернуть фрагмент

Джек Потрошитель
источник

4

Для динамических значений!

<div class="col-md-4" ng-repeat="(k, v) in tiposAcesso">
    <label class="control-label">
        <input type="radio" name="tipoAcesso" ng-model="userLogin.tipoAcesso" value="{{k}}" ng-change="changeTipoAcesso(k)" />              
        <span ng-bind="v"></span>
    </label>
</div>

в контроллере

$scope.changeTipoAcesso = function(value) {
    console.log(value);
};

Gleidosn
источник

2

Другой подход заключается в использовании Object.definePropertyдля установки valueв качестве свойства установщика геттера в области контроллера, тогда каждое изменение свойства значения будет запускать функцию, указанную в установщике:

HTML-файл:

<input type="radio" ng-model="value" value="one"/>
<input type="radio" ng-model="value" value="two"/>
<input type="radio" ng-model="value" value="three"/>

Файл javascript:

var _value = null;
Object.defineProperty($scope, 'value', {
  get: function () {
    return _value;
  },         
  set: function (value) {
    _value = value;
    someFunction();
  }
});

см. этот плункер для реализации

Леон Плата
источник

2

Я предпочитаю использовать ng-value с ng-if, [ng-value] будет обрабатывать изменения триггера

<input type="radio"  name="isStudent" ng-model="isStudent" ng-value="true" />

//to show and hide input by removing it from the DOM, that's make me secure from malicious data

<input type="text" ng-if="isStudent"  name="textForStudent" ng-model="job">

Хишам
источник

-1

 <form name="myForm" ng-submit="submitForm()">
   <label data-ng-repeat="i in [1,2,3]"><input type="radio" name="test" ng-model="$parent.radioValue" value="{{i}}"/>{{i}}</label>
   <div>currently selected: {{radioValue}}</div>
   <button type="submit">Submit</button>
</form>

Шактипрасад Свейн
источник

AngularJS - запускается при выборе переключателя

Ответы: