선택한 ng-option이 변경될 때 값 가져오기
.html 페이지에 드롭다운 목록이 있습니다.
드롭다운:
<select ng-model="blisterPackTemplateSelected" data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
사용자가 값을 선택할 때 작업을 실행하고 싶다.컨트롤러에서 다음을 수행했습니다.
컨트롤러:
$scope.$watch('blisterPackTemplateSelected', function() {
alert('changed');
console.log($scope.blisterPackTemplateSelected);
});
그러나 드롭다운 목록에서 값을 변경해도 코드가 트리거되지 않습니다.$scope.$watch('blisterPackTemplateSelected', function()
그 결과 다음 방법으로 다른 방법을 시도했습니다.ng_change = 'changedValue()'선택 태그에
그리고.
기능:
$scope.changedValue = function() {
console.log($scope.blisterPackTemplateSelected);
}
근데...blisterPackTemplateSelected는 자 스코프에 저장됩니다.부모가 자녀 범위에 액세스할 수 없다고 읽었습니다.
드롭다운 목록에서 선택한 값이 변경되었을 때 어떤 작업을 실행하는 올바른/최적의 방법은 무엇입니까?방법 1일 경우 코드에는 어떤 문제가 있습니까?
Artyom이 말한 것처럼 ngChange를 사용하여 ngModel 객체를 인수로서 ngChange 함수에 전달해야 합니다.
예:
<div ng-app="App" >
<div ng-controller="ctrl">
<select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)"
data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates">
<option value="">Select Account</option>
</select>
{{itemList}}
</div>
</div>
js:
function ctrl($scope) {
$scope.itemList = [];
$scope.blisterPackTemplates = [{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"c"}];
$scope.changedValue = function(item) {
$scope.itemList.push(item.name);
}
}
라이브 예:http://jsfiddle.net/choroshin/9w5XT/4/
나는 이것에 늦을지도 모르지만, 약간 같은 문제가 있었다.
ID와 이름을 모두 모델에 넣어야 했지만, 모든 정통 솔루션에서는 변경을 처리하기 위해 컨트롤러에 코드를 만들도록 했습니다.
필터를 이용해서 빠져나왔어요
<select
ng-model="selected_id"
ng-options="o.id as o.name for o in options"
ng-change="selected_name=(options|filter:{id:selected_id})[0].name">
</select>
<script>
angular.module("app",[])
.controller("ctrl",['$scope',function($scope){
$scope.options = [
{id:1, name:'Starbuck'},
{id:2, name:'Appolo'},
{id:3, name:'Saul Tigh'},
{id:4, name:'Adama'}
]
}])
</script>
'꼼수'는 다음과 같습니다.
ng-change="selected_name=(options|filter:{id:selected_id})[0].name"
기본 제공 필터를 사용하여 ID의 올바른 이름을 검색하고 있습니다.
여기 작동하는 데모를 가진 플렁커가 있습니다.
그것을 사용해 주세요ngChange지시.예를 들어 다음과 같습니다.
<select ng-model="blisterPackTemplateSelected"
ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"
ng-change="changeValue(blisterPackTemplateSelected)"/>
컨트롤러에 새 모델 값을 매개 변수로 전달합니다.
ng-change="changeValue(blisterPackTemplateSelected)"
베스트 프랙티스는 오브젝트를 작성하는 것입니다(ng-model에서는 항상 .를 사용합니다).
컨트롤러 내:
var myObj: {
ngModelValue: null
};
템플릿에서 다음을 수행합니다.
<select
ng-model="myObj.ngModelValue"
ng-options="o.id as o.name for o in options">
</select>
이제 넌 그냥 볼 수 있어
myObj.ngModelValue
또는 다음과 같이 ng-change 디렉티브를 사용할 수 있습니다.
<select
ng-model="myObj.ngModelValue"
ng-options="o.id as o.name for o in options"
ng-change="myChangeCallback()">
</select>
egghead.io 비디오 "The Dot"은 매우 좋은 개요를 가지고 있으며, 매우 인기 있는 스택 오버플로우 질문도 있습니다.AngularJS에서 스코프 프로토타입/프로토타입 상속의 뉘앙스는 무엇입니까?
ng-model 값은 파라미터로서 ng-change 함수를 통해 전달할 수 있습니다.
<select
ng-model="blisterPackTemplateSelected"
data-ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates"
ng-change="changedValue(blisterPackTemplateSelected)">
<option value="">Select Account</option>
</select>
시나리오를 보지 않고 알기란 조금 어렵지만, 이 방법은 효과가 있을 것입니다.
이런 거 할 수 있어요.
<html ng-app="App" >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
angular.module("App",[])
.controller("ctrl",['$scope',function($scope){
$scope.changedValue = function(item){
alert(item);
}
}]);
</script>
<div >
<div ng-controller="ctrl">
<select ng-model="blisterPackTemplateSelected" ng-change="changedValue(blisterPackTemplateSelected)" >
<option value="">Select Account</option>
<option value="Add">Add</option>
</select>
</div>
</div>
</html>
add 옵션 대신 data-ng-module을 사용해야 합니다.테스트 목적으로 추가 옵션을 사용한 적이 있습니다.
나는 여기에 늦었지만 같은 문제를 간단하고 쉽게 해결했다.
<select ng-model="blisterPackTemplateSelected" ng-change="selectedBlisterPack(blisterPackTemplateSelected)">
<option value="">Select Account</option>
<option ng-repeat="blisterPacks in blisterPackTemplates" value="{{blisterPacks.id}}">{{blisterPacks.name}}</option>
ng-change의 함수는 다음과 같다.
$scope.selectedBlisterPack= function (value) {
console.log($scope.blisterPackTemplateSelected);
};
필터를 사용하면 목록/배열에서 선택한 옵션의 값과 텍스트를 얻을 수 있습니다.
editobj를 선택합니다.FlagName=(EmployeeStatus|filename:{ditobj: editobj.(0) []
<select name="statusSelect"
id="statusSelect"
class="form-control"
ng-model="editobj.Flag"
ng-options="option.Value as option.KeyName for option in EmployeeStatus"
ng-change="editobj.FlagName=(EmployeeStatus|filter:{Value:editobj.Flag})[0].KeyName">
</select>
저도 같은 문제를 안고 독특한 해결책을 찾았습니다.이것은 베스트 프랙티스는 아니지만, 누군가에게 간단하거나 도움이 될 수 있습니다.ID 또는 클래스 또는 선택 태그에 jquery를 사용하면 텍스트와 변경 함수의 값에 모두 액세스할 수 있습니다.내 경우 옵션 값을 돛/ej를 통해 전달하고 있습니다.
<select id="projectSelector" class="form-control" ng-model="ticket.project.id" ng-change="projectChange(ticket)">
<% _.each(projects, function(project) { %>
<option value="<%= project.id %>"><%= project.title %></option>
<% }) %>
</select>
다음으로 Angular 컨트롤러의 ng-change 함수는 다음과 같습니다.
$scope.projectChange = function($scope) {
$scope.project.title=$("#projectSelector option:selected").text();
};
저는 몇 가지 해결책을 시도해 보았지만, 여기 기본적인 생산 스니펫이 있습니다.이 스니펫의 품질 보증 중에는 콘솔 출력에 주의해 주십시오.
마크업:
<!DOCTYPE html>
<html ng-app="appUp">
<head>
<title>
Angular Select snippet
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
</head>
<body ng-controller="upController">
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-3">
<div class="form-group">
<select name="slct" id="slct" class="form-control" ng-model="selBrand" ng-change="Changer(selBrand)" ng-options="brand as brand.name for brand in stock">
<option value="">
Select Brand
</option>
</select>
</div>
<div class="form-group">
<input type="hidden" name="delimiter" value=":" ng-model="delimiter" />
<input type="hidden" name="currency" value="$" ng-model="currency" />
<span>
{{selBrand.name}}{{delimiter}}{{selBrand.price}}{{currency}}
</span>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
</script>
<script src="js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
코드:
var c = console;
var d = document;
var app = angular.module('appUp',[]).controller('upController',function($scope){
$scope.stock = [{
name:"Adidas",
price:420
},
{
name:"Nike",
price:327
},
{
name:"Clark",
price:725
}
];//data
$scope.Changer = function(){
if($scope.selBrand){
c.log("brand:"+$scope.selBrand.name+",price:"+$scope.selBrand.price);
$scope.currency = "$";
$scope.delimiter = ":";
}
else{
$scope.currency = "";
$scope.delimiter = "";
c.clear();
}
}; // onchange handler
});
설명: 여기서 중요한 점은 변경된 값의 늘체크입니다.즉, 값이 '미정의' 또는 '늘'인 경우 이 상황을 처리해야 합니다.
언급URL : https://stackoverflow.com/questions/22016565/get-value-when-selected-ng-option-changes
'sourcecode' 카테고리의 다른 글
| C#을 사용하여 csv 파일을 json으로 변환 (0) | 2023.02.15 |
|---|---|
| 워드프레스:$wpdb->get_results를 사용할 때 결과를 이스케이프 해제하려면 어떻게 해야 합니까? (0) | 2023.02.15 |
| AngularJS - 소스 맵을 무시하는 스택트레이스 (0) | 2023.02.15 |
| react-testing-library는 왜 ToBeInThe Document() (0) | 2023.02.15 |
| Wordpress 테마 업로드 오류 PCLZIP_ERR_BAD_포맷 (0) | 2023.02.15 |