通过ng-change选择ng-object

本文翻译自：getting the ng-object selected with ng-change

Given the following select element 给出以下select元素

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

Is there a way to get MAGIC_THING to be equal to the currently selected size, so I have access to size.name and size.code in my controller? 有没有办法让MAGIC_THING等于当前选择的大小，所以我可以访问我的控制器中的size.name和size.code ？

size.code affects a lot of the other parts of the app (image urls, etc), but when the ng-model of item.size.code is updated, item.size.name needs to be updated as well for the user facing stuff. size.code影响很多应用程序的其他部分（图像的URL等），但是当的NG-模型item.size.code被更新， item.size.name需要被更新为面向用户东西。 I assume that the correct way to do this is capturing the change event and setting the values inside of my controller, but I'm not sure what I can pass into update to get the proper values. 我假设正确的方法是捕获更改事件并在我的控制器中设置值，但我不确定我可以传递给更新以获取正确的值。

If this is completely the wrong way to go about it, I'd love to know the right way. 如果这完全是错误的方式，我很想知道正确的方法。

#1楼

参考：https://stackoom.com/question/yMbS/通过ng-change选择ng-object

#2楼

Instead of setting the ng-model to item.size.code, how about setting it to size: 而不是将ng-model设置为item.size.code，如何将其设置为size：

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

Then in your update() method, $scope.item will be set to the currently selected item. 然后在update()方法中， $scope.item将设置为当前选定的项目。

And whatever code needed item.size.code , can get that property via $scope.item.code . 无论代码需要item.size.code ，都可以通过$scope.item.code获取该属性。

Fiddle . 小提琴。

Update based on more info in comments: 根据评论中的更多信息进行更新：

Use some other $scope property for your select ng-model then: 为您的选择模型使用一些其他$ scope属性，然后：

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

Controller: 控制器：

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

#3楼

You can also directly get selected value using following code 您还可以使用以下代码直接获取所选值

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

script.js 的script.js

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

#4楼

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

#5楼

If Divyesh Rupawala's answer doesn't work (passing the current item as the parameter), then please see the onChanged() function in this Plunker. 如果Divyesh Rupawala的答案不起作用（将当前项目作为参数传递），那么请参阅此Plunker中的onChanged()函数。 It's using this : 它正在使用this ：

http://plnkr.co/edit/B5TDQJ http://plnkr.co/edit/B5TDQJ

#6楼

This might give you some ideas 这可能会给你一些想法

.NET C# View Model .NET C＃View Model

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

.NET C# Web Api Controller .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);}}

Angular Controller: 角度控制器：

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

Angular Template: 角度模板：

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

通过ng-change选择ng-object相关推荐

ng serve 和 ng build 的区别
在这个文档里有介绍. 在开发过程中,你通常会使用 ng serve 命令来借助 webpack-dev-server 在本地内存中构建.监控和提供服务.但是,当你打算部署它时,就必须使用 ng bui ...
Docker部署NG并设置 NG为静态文件管理器
Docker部署NG并设置 NG为静态文件管理器 1.docker拉取nginx镜像 docker pull nginx 或者docker pull nginx:指定版本号 2.检查拉去下来的镜像 d ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
输入 ng build 或者 ng serve 之后没有任何输出的问题分析
Angular 应用,输入 ng build 命令,没有任何反应: ng version 命令的输出:显示的 CLI 版本号为 12.2.5 然而 package.json 里定义的版本为 ~9.1. ...
php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍
PHP NG (你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP 5.6 的兼容性. Dmitry Stogov 在今年1月中旬 ...
php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍_PHP
PHP NG (你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP 5.6 的兼容性. Dmitry Stogov 在今年1月中旬 ...
php ng 性能,PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍_PHP教程
PHP NG (PHP 5.7) 性能比PHP5.6 提升近1倍 PHP NG 你要愿意的话叫 PHP 5.7 也行)目前还在 alpha 开发阶段,但已经显示出惊人的性能提升.关键是仍保持对 PHP ...
空间连续体上接触力的无线传感和定位
WiForce: Wireless Sensing and Localization of Contact Forces on a Space Continuum WiForce:空间连续体上接触力的 ...
angular ng lint 相关
首先还是要来讲一讲 ng lint 的相关知识: 通过Angular CLI的执行语句 **ng new XXX** 创建新项目后,目录中会包含一个tslint.json文件,这个文件就是用来定义一个 ...
前端框架 ng 环境配置
一.安装 nvm 版本管理工具 nvm 英文全称 node.js version management,是一个 nodejs 的版本管理工具.目的是解决 node.js 各种版本存在不兼容现象,并且可 ...

通过ng-change选择ng-object

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

通过ng-change选择ng-object相关推荐

最新文章

热门文章