ng-change로 선택된 ng 객체 가져 오기

다음과 같은 select 요소가 주어지면

<select ng-options="size.code as size.name for size in sizes " 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING)">
</select>

MAGIC_THING을 현재 선택된 크기와 동일하게 만드는 방법이 있습니까? size.name 및 size.code내 컨트롤러는?

size.code는 앱의 다른 많은 부분 (이미지 URL 등)에 영향을 주지만 ng-model이 item.size.code 이 업데이트되면 item.size.name사용자가 물건을 향하도록 업데이트해야합니다. 이 작업을 수행하는 올바른 방법은 변경 이벤트를 캡처하고 컨트롤러 내부의 값을 설정하는 것이라고 가정하지만 적절한 값을 얻기 위해 업데이트에 전달할 수있는 것이 확실하지 않습니다.

이것이 완전히 잘못된 길이라면, 나는 올바른 길을 알고 싶습니다.

ng-model을 item.size.code로 설정하는 대신 크기로 설정하는 방법은 다음과 같습니다.

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>

그런 다음 update()방법 $scope.item에서 현재 선택된 항목으로 설정됩니다.

그리고 필요한 코드는 무엇이든 item.size.code통해 해당 속성을 얻을 수 있습니다 $scope.item.code.

바이올린 .

의견에 대한 자세한 정보를 기반으로 업데이트 :

선택한 ng-model에 다른 $ scope 속성을 사용하십시오.

<select ng-options="size as size.name for size in sizes" 
   ng-model="selectedItem" ng-change="update()"></select>

제어 장치:

$scope.update = function() {
   $scope.item.size.code = $scope.selectedItem.code
   // use $scope.selectedItem.code and $scope.selectedItem.name here
   // for other stuff ...
}

다음 코드를 사용하여 선택한 값을 직접 얻을 수도 있습니다.

 <select ng-options='t.name for t in templates'
                  ng-change='selectedTemplate(t.url)'></select>

script.js

 $scope.selectedTemplate = function(pTemplate) {
    //Your logic
    alert('Template Url is : '+pTemplate);
}

당신은 또한 이것을 시도 coud :

<select  ng-model="selectedItem" ng-change="update()">
<option ng-repeat="item in items" ng-selected="selectedItem == item.Id" value="{{item.Id}}">{{item.Name}}</option>
</select>

Divyesh Rupawala의 답변이 작동하지 않으면 (현재 항목을 매개 변수로 전달) onChanged() 이 Plunker 기능 . 사용하고 있습니다 this:

http://plnkr.co/edit/B5TDQJ

<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}}          </option>
</select>

//Javascript
$scope.update = function () {
    $scope.myItem;
    alert('Hello');
}

<!--HTML-->
<div class="form-group">
     <select name="name"
             id="id" 
             ng-model="myItem" 
             ng-options="size as size.name for size in sizes"
             class="form-control" 
             ng-change="update()"
             multiple
             required>
     </select>
</div>

당신이 쓰고 싶은 이름, 아이디, 클래스, 여러, 필수, 당신은 이런 식으로 쓸 수 있습니다.

이것은 당신에게 몇 가지 아이디어를 줄 수 있습니다

.NET C # 모델보기

public class DepartmentViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

.NET C # 웹 API 컨트롤러

public class DepartmentController : BaseApiController
{
    [HttpGet]
    public HttpResponseMessage Get()
    {
        var sms = Ctx.Departments;

        var vms = new List<DepartmentViewModel>();

        foreach (var sm in sms)
        {
            var vm = new DepartmentViewModel()
            {
                Id = sm.Id,
                Name = sm.DepartmentName
            };
            vms.Add(vm);
        }

        return Request.CreateResponse(HttpStatusCode.OK, vms);
    }

}

각도 컨트롤러 :

$http.get('/api/department').then(
    function (response) {
        $scope.departments = response.data;
    },
    function (response) {
        toaster.pop('error', "Error", "An unexpected error occurred.");
    }
);

$http.get('/api/getTravelerInformation', { params: { id: $routeParams.userKey } }).then(
   function (response) {
       $scope.request = response.data;
       $scope.travelerDepartment = underscoreService.findWhere($scope.departments, { Id: $scope.request.TravelerDepartmentId });
   },
    function (response) {
        toaster.pop('error', "Error", "An unexpected error occurred.");
    }
);

각도 템플릿 :

<div class="form-group">
    <label>Department</label>
    <div class="left-inner-addon">
        <i class="glyphicon glyphicon-hand-up"></i>
        <select ng-model="travelerDepartment"
                ng-options="department.Name for department in departments track by department.Id"
                ng-init="request.TravelerDepartmentId = travelerDepartment.Id"
                ng-change="request.TravelerDepartmentId = travelerDepartment.Id"
                class="form-control">
            <option value=""></option>
        </select>
    </div>
</div>

개체를 올바르게 비교하려면 "추적"을 사용해야합니다. 그렇지 않으면 Angular는 객체를 비교하는 기본 js 방식을 사용합니다.

따라서 예제 코드는-

    <select ng-options="size.code as size.name
 for size in sizes track by size.code" 
ng-model="item.size.code"></select>

AngularJS의 필터 가 나를 위해 일했습니다.

code/id이 고유 하다고 가정하면 AngularJS를 사용하여 특정 객체를 필터링 filter하고 선택한 객체 속성으로 작업 할 수 있습니다. 위의 예를 고려하면 :

<select ng-options="size.code as size.name for size in sizes" 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING); search.code = item.size.code">
</select>

<!-- OUTSIDE THE SELECT BOX -->

<h1 ng-repeat="size in sizes | filter:search:true"
    ng-init="search.code = item.size.code">
  {{size.name}}
</h1>

이제 여기에는 3 가지 중요한 측면이 있습니다 .

1. ng-init="search.code = item.size.code"- 상자 h1외부 에서 요소 를 초기화 select하는 경우 필터 쿼리를 선택한 옵션으로 설정하십시오 .

2. ng-change="update(MAGIC_THING); search.code = item.size.code"-선택 입력을 변경하면 "검색"쿼리를 현재 선택된으로 설정하는 행을 하나 더 실행 item.size.code합니다.

3. filter:search:true- 엄격한 일치true 를 활성화하려면 필터로 전달하십시오 .

그게 다야. size.code가 uniqueID 인 경우 h1텍스트가 인 요소 가 하나만 size.name있습니다.

내 프로젝트에서 이것을 테스트했으며 작동합니다.

행운을 빕니다

각도 선택 옵션 목록에서 값을 얻는 가장 깨끗한 방법입니다 (ID 또는 텍스트 제외). 페이지에서 다음과 같은 제품 선택이 있다고 가정하십시오.

<select ng-model="data.ProductId"
        ng-options="product.Id as product.Name for product in productsList"
        ng-change="onSelectChange()">
</select>

그런 다음 컨트롤러에서 콜백 함수를 다음과 같이 설정하십시오.

    $scope.onSelectChange = function () {
        var filteredData = $scope.productsList.filter(function (response) {
            return response.Id === $scope.data.ProductId;
        })
        console.log(filteredData[0].ProductColor);
    }

간단히 설명 : ng-change 이벤트는 선택 항목의 옵션 항목을 인식하지 못하므로 ngModel을 사용하여 컨트롤러에로드 된 옵션 목록에서 선택한 항목을 필터링합니다.

또한 ngModel이 실제로 업데이트되기 전에 이벤트가 시작되므로 바람직하지 않은 결과가 발생할 수 있으므로 더 좋은 방법은 시간 초과를 추가하는 것입니다.

        $scope.onSelectChange = function () {
            $timeout(function () {
            var filteredData = $scope.productsList.filter(function (response) {
                return response.Id === $scope.data.ProductId;
            })
            console.log(filteredData[0].ProductColor);
            }, 100);
        };