热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用ng-change来选择ng对象。-gettingtheng-objectselectedwithng-change

Giventhefollowingselectelement给定以下select元素<selectng-optionssize.codeassize.namefors

Given the following select element

给定以下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与当前选定的大小相等,所以我可以访问siz .name和size。我的控制器代码?

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

大小。代码会影响应用程序的许多其他部分(图像url等),但是当item.size的ng模型时。代码被更新,item.size.name也需要更新,以供用户使用。我假设正确的方法是捕获更改事件并在我的控制器中设置值,但是我不确定我可以传递什么到update中以获得正确的值。

If this is completely the wrong way to go about it, I'd love to know the right way.

如果这是完全错误的方式,我想知道正确的方式。

10 个解决方案

#1


444  

Instead of setting the ng-model to item.size.code, how about setting it to size:

而不是将ng-model设置为item.size。代码,如何设置它的大小:


Then in your update() method, $scope.item will be set to the currently selected item.

然后在update()方法中,使用$scope。项目将被设置为当前选择的项目。

And whatever code needed item.size.code, can get that property via $scope.item.code.

以及任何代码需要的项。size。代码,可以通过$scope.item.code获得该属性。

Fiddle.

小提琴。

Update based on more info in comments:

基于更多的信息更新评论:

Use some other $scope property for your select ng-model then:

然后为您的选择ng-model使用一些其他的$scope属性:


Controller:

控制器:

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

#2


56  

You can also directly get selected value using following code

您还可以使用以下代码直接获得所选的值。

 

script.js

script.js

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

#3


11  

you also coud try this:

你也可以试试这个:


#4


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. It's using this:

如果Divyesh Rupawala的答案不起作用(将当前项作为参数传递),那么请查看这个柱塞中的onChanged()函数。用这个:

http://plnkr.co/edit/B5TDQJ

http://plnkr.co/edit/B5TDQJ

#5


2  


#6


2  

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

İf you want to write, name, id, class, multiple, required , You can write in this way.

İf你想写、名称、id、类,多个,必需的,你可以以这种方式编写。

#7


1  

This might give you some ideas

这可能会给你一些建议

.NET C# View Model

net c#视图模型

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

        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:

角模板:

#8


1  

AngularJS's Filter worked out for me.

AngularJS的过滤器对我来说很有用。

Assuming the code/id is unique, we can filter out that particular object with AngularJS's filter and work with the selected objects properties. Considering the example above:

假设代码/id是唯一的,我们可以使用AngularJS的过滤器过滤特定的对象,并使用所选的对象属性。考虑到上面的例子:





{{size.name}}

Now, there are 3 important aspects to this:

这里有三个重要的方面

  1. ng-init="search.code = item.size.code" - on initializing h1 element outside select box, set the filter query to the selected option.

    ng-init = "搜索。代码= item.size。“代码”——在select框外初始化h1元素时,将过滤器查询设置为所选选项。

  2. ng-change="update(MAGIC_THING); search.code = item.size.code" - when you change the select input, we'll run one more line which will set the "search" query to the currently selected item.size.code.

    ng-change = "更新(MAGIC_THING);搜索。代码= item.size。代码“——当您更改select输入时,我们将运行另一行,它将把“搜索”查询设置为当前所选的项。

  3. filter:search:true - Pass true to filter to enable strict matching.

    过滤器:搜索:真-传递真过滤,使严格匹配。

That's it. If the size.code is uniqueID, we'll have only one h1 element with the text of size.name.

就是这样。如果大小。代码是独特的eid,我们将只有一个h1元素的文本大小。name。

I've tested this in my project and it works.

我在我的项目中测试过这个,它很有效。

Good Luck

祝你好运

#9


0  

You need to use "track by" so that the objects can be compared correctly. Otherwise Angular will use the native js way of comparing objects.

您需要使用“track by”来正确地比较对象。否则,角度将使用本机js方式比较对象。

So your example code would change to -

所以你的例子代码会变成-

    

#10


0  

This is the cleanest way to get a value from an angular select options list (other than The Id or Text). Assuming you have a Product Select like this on your page :

这是从角选择选项列表(除了Id或文本)获取值的最干净的方法。假设您的页面上有这样的产品选择:


Then in Your Controller set the callback function like so:

然后在控制器中设置回调函数如下:

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

Simply Explained: Since the ng-change event does not recognize the option items in the select, we are using the ngModel to filter out the selected Item from the options list loaded in the controller.

简单解释:由于ng-change事件不识别select中的选项项,所以我们使用ngModel从控制器中加载的选项列表中筛选所选项。

Furthermore, since the event is fired before the ngModel is really updated, you might get undesirable results, So a better way would be to add a timeout :

此外,由于事件是在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);
        };

推荐阅读
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • 本文总结了Java中日期格式化的常用方法,并给出了示例代码。通过使用SimpleDateFormat类和jstl fmt标签库,可以实现日期的格式化和显示。在页面中添加相应的标签库引用后,可以使用不同的日期格式化样式来显示当前年份和月份。该文提供了详细的代码示例和说明。 ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 本文介绍了C#中生成随机数的三种方法,并分析了其中存在的问题。首先介绍了使用Random类生成随机数的默认方法,但在高并发情况下可能会出现重复的情况。接着通过循环生成了一系列随机数,进一步突显了这个问题。文章指出,随机数生成在任何编程语言中都是必备的功能,但Random类生成的随机数并不可靠。最后,提出了需要寻找其他可靠的随机数生成方法的建议。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • 不同优化算法的比较分析及实验验证
    本文介绍了神经网络优化中常用的优化方法,包括学习率调整和梯度估计修正,并通过实验验证了不同优化算法的效果。实验结果表明,Adam算法在综合考虑学习率调整和梯度估计修正方面表现较好。该研究对于优化神经网络的训练过程具有指导意义。 ... [详细]
  • 利用Visual Basic开发SAP接口程序初探的方法与原理
    本文介绍了利用Visual Basic开发SAP接口程序的方法与原理,以及SAP R/3系统的特点和二次开发平台ABAP的使用。通过程序接口自动读取SAP R/3的数据表或视图,在外部进行处理和利用水晶报表等工具生成符合中国人习惯的报表样式。具体介绍了RFC调用的原理和模型,并强调本文主要不讨论SAP R/3函数的开发,而是针对使用SAP的公司的非ABAP开发人员提供了初步的接口程序开发指导。 ... [详细]
  • 闭包一直是Java社区中争论不断的话题,很多语言都支持闭包这个语言特性,闭包定义了一个依赖于外部环境的自由变量的函数,这个函数能够访问外部环境的变量。本文以JavaScript的一个闭包为例,介绍了闭包的定义和特性。 ... [详细]
author-avatar
nikechen
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有