AngularJS - Radyo düğmesi seçildiğinde tetikle

118

Pek çok ng-xxxx türü seçeneği araştırdım ve denedim, ancak birini bulamadım .. Sadece radyo düğmesi seçildiğinde denetleyicideki bazı işlevleri çağırmak istiyorum.

Yani aşağıdakine benzer olabilir .. (Tabii aşağıdaki kod çalışmıyor)

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

İstediğimi elde etmenin bir yolu var mı?

angularjs

— MomentH
kaynak

231

Radyo düğmesi seçiminde işlevleri çağırmanın en az 2 farklı yöntemi vardır:

1) ng-changeDirektif kullanarak :

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

ve sonra bir denetleyicide:

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

İşte jsFiddle: http://jsfiddle.net/ZPcSe/5/

2) Değişiklikler için modeli izlemek. Bu, giriş düzeyinde özel bir şey gerektirmez:

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

ancak bir denetleyicide şunlar bulunur:

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

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

Kullanım alanınız hakkında daha fazla bilgi sahibi olmak, uygun bir çözüm önermenize yardımcı olacaktır.

— pkozlowski.opensource
kaynak

6

AngularJS Bootstrap bağlamalarını kullanıyorum. Saat çalışmıyor ama ng-değişim işleyicisi çalışıyor.

— zmbq

46

Radyo grubu için tek bir ng-değiştirme direktifi kullanmanın bir yolu var mı?

— jEremyB

20

Kelime valueoldukça kafa karıştırıcı hale getiriyor.

— Vibhor Dube

1

@jEremyB .. Ben tek bilmem ng-changeözellikle ... ama (örneğin, bir sahip olarak çoklu olay işleyicileri önleyebilirsiniz ng-change=...her on inputyöntem 2'yi kullanarak): Her girdi bir gerektiriyor ng-modelve daha sonra tek sahip watchiçin dinleme değiştir ...

— dsdsdsdsd

neden ng-click değil?

— Tsagana Nokhaeva

19

Tetik kaynağı tıklama kaynaklı değilse ngClick yerine ngChange kullanılmalıdır.

Aşağıdakiler ne istiyorsun? senin durumunda tam olarak ne çalışmıyor?

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
kaynak

4

Bu yalnızca tıklamalar için işe yarar. Kullanım klavyeyi kullanarak bir radyo düğmesi ayarlarsa ne olur?

— rodrigo-silveira

8

Açının daha yeni sürümlerinde (1.3 kullanıyorum) temelde modeli ve değeri ayarlayabilir ve çift ciltleme tüm işi yapar, bu örnek bir cazibe gibi çalışır:

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>

Snippet'i genişlet

— jack.the.ripper
kaynak

4

Dinamik değerler için!

<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>

kontrolörde

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

— Gleidosn
kaynak

2

Başka bir yaklaşım, denetleyici kapsamında bir alıcı ayarlayıcı özelliği olarak Object.definePropertyayarlamak için kullanmaktır value, daha sonra değer özelliğindeki her değişiklik, ayarlayıcıda belirtilen bir işlevi tetikler:

HTML dosyası:

<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 dosyası:

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

uygulama için bu plunker'a bakın

— Leon Plata
kaynak

2

ng-if ile ng değerini kullanmayı tercih ederim, [ng-değeri] tetikleme değişikliklerini halledecektir

<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">

— Hisham
kaynak

-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>

— saktiprasad swain
kaynak