AngularJS - 라디오 버튼을 선택한 경우 트리거
여러 가지 ng-xxxxx 옵션을 찾아봤는데 찾을 수가 없었어요.라디오 버튼이 선택되었을 때 컨트롤러의 기능을 호출하고 싶을 뿐입니다.
그래서 다음과 비슷할 수 있습니다.(물론 아래 코드는 동작하지 않습니다)
<input type="radio" ng-model="value" value="one" ng-click="checkStuff()"/>
제가 원하는 것을 이룰 방법이 있을까요?
라디오 버튼 선택 시 함수를 호출하는 방법은 적어도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/
사용 사례에 대해 자세히 알면 적절한 솔루션을 제안할 수 있습니다.
트리거 소스가 클릭이 아닌 경우 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>
새로운 버전의 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>동적 값!
<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);
};
또 다른 접근법은Object.defineProperty세팅하다value컨트롤러 스코프에서 getter setter 속성으로 지정되면 값 속성을 변경할 때마다 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"/>
javascript 파일:
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>
언급URL : https://stackoverflow.com/questions/13077320/angularjs-trigger-when-radio-button-is-selected
'programing' 카테고리의 다른 글
| AngularJS: 템플릿 내에서 변수를 설정하려면 어떻게 해야 합니까? (0) | 2023.03.15 |
|---|---|
| 엔티티 프레임워크를 사용한ID 생성 및 자동 증분 방법 (0) | 2023.03.15 |
| Android 앱에서 WordPress에서 게시물 가져오기 (0) | 2023.03.15 |
| JSONObject 요소 업데이트 (0) | 2023.03.15 |
| 테스트 실행 시 스프링 부트 "PSQLException: FATAL: 미안, 너무 많은 클라이언트" (0) | 2023.03.15 |