lấy đối tượng ng được chọn với ng-thay đổi

Cho phần tử chọn sau

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

Có cách nào để khiến MAGIC_THING bằng với kích thước hiện được chọn, vì vậy tôi có quyền truy cập size.namevà size.codetrong bộ điều khiển của mình không?

size.code ảnh hưởng đến rất nhiều phần khác của ứng dụng (url hình ảnh, v.v.), nhưng khi mô hình ng item.size.codeđược cập nhật, cũng item.size.namecần phải được cập nhật cho người dùng phải đối mặt. Tôi giả định rằng cách chính xác để thực hiện việc này là ghi lại sự kiện thay đổi và đặt các giá trị bên trong bộ điều khiển của tôi, nhưng tôi không chắc những gì tôi có thể chuyển vào bản cập nhật để có được các giá trị phù hợp.

Nếu đây là cách hoàn toàn sai lầm, tôi muốn biết cách đúng.

Thay vì đặt mô hình ng thành item.size.code, làm thế nào về việc đặt nó thành kích thước:

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

Sau đó, trong update()phương thức của bạn , $scope.itemsẽ được đặt thành mục hiện được chọn.

Và bất cứ mã nào cần thiết item.size.code, có thể có được tài sản đó thông qua $scope.item.code.

Fiddle .

Cập nhật dựa trên nhiều thông tin hơn trong các bình luận:

Sử dụng một số thuộc tính $ scope khác cho mô hình ng chọn của bạn sau đó:

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

Điều khiển:

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

Bạn cũng có thể trực tiếp nhận giá trị được chọn bằng mã sau

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

bạn cũng nên thử cái này:

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

Nếu câu trả lời của Divyesh Rupawala không hoạt động (chuyển mục hiện tại làm tham số), thì vui lòng xem onChanged()chức năng trong Plunker này. Nó đang sử dụng 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>

Nếu bạn muốn viết, tên, id, lớp, nhiều, bắt buộc, Bạn có thể viết theo cách này.

Điều này có thể cung cấp cho bạn một số ý tưởng

Mô hình xem .NET C #

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

Bộ điều khiển Api .NET C #

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

}

Bộ điều khiển góc:

$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.");
    }
);

Mẫu góc:

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

Bạn cần sử dụng "theo dõi" để các đối tượng có thể được so sánh chính xác. Nếu không, Angular sẽ sử dụng cách js gốc để so sánh các đối tượng.

Vì vậy, mã ví dụ của bạn sẽ thay đổi thành -

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

Bộ lọc của AngularJS làm việc cho tôi.

Giả sử code/idlà duy nhất , chúng ta có thể lọc ra đối tượng cụ thể đó bằng AngularJS filtervà làm việc với các thuộc tính đối tượng được chọn. Xem xét ví dụ trên:

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

Bây giờ, có 3 khía cạnh quan trọng trong việc này :

1. ng-init="search.code = item.size.code"- khi khởi tạo h1phần tử bên ngoài selecthộp, đặt truy vấn bộ lọc thành tùy chọn đã chọn .

2. ng-change="update(MAGIC_THING); search.code = item.size.code"- khi bạn thay đổi đầu vào được chọn, chúng tôi sẽ chạy thêm một dòng sẽ đặt truy vấn "tìm kiếm" thành truy vấn hiện được chọn item.size.code.

3. filter:search:true- Truyền qua truebộ lọc để cho phép kết hợp chặt chẽ .

Đó là nó. Nếu size.codelà duy nhấtID , chúng ta sẽ chỉ có một h1yếu tố với văn bản size.name.

Tôi đã thử nghiệm điều này trong dự án của tôi và nó hoạt động.

Chúc may mắn

Đây là cách sạch nhất để nhận giá trị từ danh sách tùy chọn chọn góc (trừ Id hoặc Văn bản). Giả sử bạn có Sản phẩm Chọn như thế này trên trang của bạn:

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

Sau đó, trong Bộ điều khiển của bạn đặt chức năng gọi lại như vậy:

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

Giải thích đơn giản: Vì sự kiện thay đổi ng không nhận ra các mục tùy chọn trong phần chọn, chúng tôi đang sử dụng ngModel để lọc ra Mục đã chọn từ danh sách tùy chọn được tải trong bộ điều khiển.

Hơn nữa, vì sự kiện được kích hoạt trước khi ngModel thực sự được cập nhật, bạn có thể nhận được kết quả không mong muốn, vì vậy cách tốt hơn là thêm thời gian chờ:

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