Question

给出以下选择元素

<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会影响应用程序的许多其他部分（图片网址等），但是当更新item.size.code的ng模型时，item.size.name也需要更新面向用户的用户。我假设正确的方法是捕获更改事件并设置控制器内部的值，但我不确定我可以传递给更新以获取正确的值。

如果这是完全错误的做法，我很想知道正确的方法。

Answer 1

不是将ng-model设置为item.size.code，而是将其设置为size：

<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获取该属性。

Fiddle

根据评论中的更多信息

更新：

为您的选择模型使用其他一些$ 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 ...
}

Answer 2

您还可以使用以下代码直接获取所选值

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

Answer 3

你也可以试试这个：

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

Answer 4

如果Divyesh Rupawala的答案不起作用（将当前项目作为参数传递），请参阅此Plunker中的onChanged()函数。它正在使用this：

http://plnkr.co/edit/B5TDQJ

Answer 5

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

Answer 6

//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，类，多个，必需，你可以用这种方式写。

Answer 7

这可能会给你一些想法

.NET C＃View Model

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>

Answer 8

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>

现在，有三个重要方面：

ng-init="search.code = item.size.code" - 在初始化h1框之外的select元素时，将过滤查询设置为所选选项。
ng-change="update(MAGIC_THING); search.code = item.size.code" - 当您更改选择输入时，我们会再运行一行，将“搜索”查询设置为当前选定的item.size.code。
filter:search:true - 通过true过滤以启用严格匹配。

就是这样。如果size.code是 uniqueID ，我们将只有一个h1元素，文字为size.name。

我在我的项目中对此进行了测试，但它确实有效。

祝你好运

Answer 9

您需要使用“track by”，以便可以正确比较对象。否则Angular将使用本地js方式来比较对象。

因此，您的示例代码将更改为 -

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

Answer 10

这是从角度选择选项列表（Id或Text除外）获取值的最简洁方法。假设您的页面上有这样的产品选择：

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

然后在您的Controller中设置回调函数，如下所示：

    $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从控制器中加载的选项列表中过滤掉所选项目。 / p>

此外，由于在更新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);
        };

通过ng-change选择ng-object

10 个答案: