ng-change를 사용하여 ng-object 선택

ng-change를 사용하여 ng-object 선택

다음 선택 요소가 지정됨

<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내트컨 러? ???

다른 URL size.code의 이 size.code의 에 영향을 주는 item.size.codeitem.size.name사용자용도 갱신할 필요가 있습니다.올바른 방법은 변경 이벤트를 캡처하여 컨트롤러 내에서 값을 설정하는 것이라고 생각합니다만, 올바른 값을 얻기 위해 업데이트에 무엇을 사용할 수 있는지 잘 모르겠습니다.

만약 이게 완전히 잘못된 방법이라면, 저는 올바른 방법을 알고 싶습니다.

ng-model을 item.size.code로 설정하는 대신 size로 설정하는 것은 어떨까요?

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

그 your your your thenupdate() 법,,$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.discripts.discripts: 스크립트

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

이것도 시도해 보세요.

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

않는 경우 항목을 로 전달) Divesh Rupawala를 참조하십시오.onChanged()기능을 합니다.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>

쓰기, 이름, ID, 클래스, 다중, 필수, 이렇게 쓸 수 있습니다.

이게 너에게 아이디어를 줄지도 몰라.

.NET C# 모델 표시

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

.NET C# Web 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의 Filter가 효과가 있었어요.

요.code/id이 특정 오브젝트를 Angular로 필터링할 수 있습니다.JS의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유일무쌍아이디님, 1명밖에 없습니다.h1텍스트가 있는 요소size.name.

저는 제 프로젝트에서 이것을 테스트했고, 효과가 있습니다.

행운을 빌어요

각도 선택 옵션 목록에서 값을 가져오는 가장 깨끗한 방법입니다([Id] 또는 [Text] 제외).페이지에 다음과 같은 제품 선택이 있다고 가정합니다.

<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 이벤트에서는 select 옵션 항목이 인식되지 않기 때문에 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);
        };

언급URL : https://stackoverflow.com/questions/14386570/getting-the-ng-object-selected-with-ng-change