[angularjs] AngularJS-라디오 버튼이 선택되면 트리거됩니다.

Program / 글쓴이

많은 ng-xxxx 종류의 옵션을 검색하고 시도했지만 하나를 찾을 수 없습니다. 라디오 버튼이 선택되었을 때 컨트롤러에서 일부 기능을 호출하고 싶습니다.

따라서 다음과 비슷할 수 있습니다. (물론 아래 코드는 작동하지 않습니다) 

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

내가 원하는 것을 얻을 수있는 방법이 있습니까?

답변

라디오 버튼 선택에서 함수를 호출하는 방법에는 적어도 두 가지가 있습니다.

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/

사용 사례에 대해 더 많이 알면 적절한 솔루션을 제안하는 데 도움이됩니다.

답변

트리거 소스가 클릭이 아닌 경우 ngClick 대신 ngChange를 사용해야합니다.

아래에 원하는 것이 있습니까? 귀하의 경우에 정확히 작동하지 않는 것은 무엇입니까?

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>

답변

최신 버전의 각도 (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>

스 니펫 확장

답변

역동적 인 가치를 위해!

<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);
};

답변

또 다른 접근 방식은 컨트롤러 범위에서 getter setter 속성 Object.defineProperty으로 설정 하는 데 사용 하는 것입니다 value. 그러면 value 속성을 변경할 때마다 setter에 지정된 함수가 트리거됩니다.

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

자바 스크립트 파일 :

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

구현 은이 플 런커 를 참조하십시오.

답변

ng-if와 함께 ng-value를 사용하는 것을 선호합니다. [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">

답변

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