선택한 옵션이 변경되면 값 가져 오기

114

내 .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 인 경우 코드에서 내가 뭘 잘못하고 있는가?

angularjs  angularjs-scope 
— xiaolong97427
소스

답변:

187

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로 설정하려면 어떻게하나요?
— AmiLinn
안녕하세요 @Alex Choroshin 저는 같은 유형의 문제가 있지만 데이터베이스에서 데이터를 수집 할 때 데이터베이스에서 데이터를 얻고 있습니다. 어떻게 div에 해당 데이터를 표시 할 수 있습니까? 컨트롤러의 함수 $ scope.accountdetaildata = data.data에서 이것을 시도합니다. 및보기에 내가 데이터베이스에서 수신 한 데이터로이 도시 코드 {{accountdetaildata .balance}} 그러나 데이터하지를 시도하고 난 콘솔에서 해당 데이터를 볼 수 있습니다 div에
— 나딤 Ijaz을
32

늦었 을지 몰라도 다소 같은 문제 .

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의 올바른 이름을 검색하고 있습니다.

작동하는 데모 가있는 플런 커가 있습니다.

— 사이먼
소스
20

ngChangeIT 지시문에 사용하십시오 . 예를 들면 :

<select ng-model="blisterPackTemplateSelected" 
        ng-options="blisterPackTemplate as blisterPackTemplate.name for blisterPackTemplate in blisterPackTemplates" 
        ng-change="changeValue(blisterPackTemplateSelected)"/>

그리고 컨트롤러의 새 모델 값을 매개 변수로 전달합니다.

ng-change="changeValue(blisterPackTemplateSelected)"
— 아르 템 프라노 비치
소스
8

모범 사례는 개체를 만드는 것입니다 (항상 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에서 범위 프로토 타입 / 프로토 타입 상속의 뉘앙스는 무엇입니까?

— Martijn Welker
소스
5

ng-change 함수를 통해 ng-model 값을 매개 변수로 전달할 수 있습니다.

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

시나리오를 보지 않고 아는 것은 약간 어렵지만 작동합니다.

— Wawy
소스
2

다음과 같이 할 수 있습니다.

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

옵션을 추가하는 대신 data-ng-options를 사용해야합니다. 테스트 목적으로 추가 옵션을 사용했습니다.

— Saurabh
소스
2

나는 여기에 늦었지만 간단하고 쉬운 방법으로 같은 종류의 문제를 해결했습니다.

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

    };
— Usman
소스
1

필터를 사용하여 목록 / 배열에서 선택한 옵션의 값과 텍스트를 얻을 수 있습니다.
editobj.FlagName = (EmployeeStatus | filter : {Value : editobj.Flag}) [0] .KeyName

<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>
— 라훌 모디
소스
0

나는 같은 문제가 있었고 독특한 해결책을 찾았습니다. 이것은 모범 사례는 아니지만 누군가에게 간단하거나 도움이 될 수 있습니다. id 또는 class 또는 select 태그에 jquery를 사용하면 변경 함수의 텍스트와 값에 모두 액세스 할 수 있습니다. 제 경우에는 sails / ejs를 통해 옵션 값을 전달하고 있습니다.

    <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();
     };
— 에덴 코빈
소스
0

몇 가지 솔루션을 시도했지만 여기에 기본 프로덕션 스 니펫이 있습니다. 이 스 니펫의 품질을 보증하는 동안 콘솔 출력에주의하십시오.

마크 업 :

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

 });

설명 : 여기서 중요한 점은 변경된 값의 null 검사입니다. 즉, 값이 'undefined'또는 'null'이면이 상황을 처리해야합니다.

— 키릴 쉬르
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.