热门标签 | 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);
        };

推荐阅读
  • 本文介绍了一个在线急等问题解决方法,即如何统计数据库中某个字段下的所有数据,并将结果显示在文本框里。作者提到了自己是一个菜鸟,希望能够得到帮助。作者使用的是ACCESS数据库,并且给出了一个例子,希望得到的结果是560。作者还提到自己已经尝试了使用"select sum(字段2) from 表名"的语句,得到的结果是650,但不知道如何得到560。希望能够得到解决方案。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • 生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型,可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]
  • 本文讨论了在Windows 8上安装gvim中插件时出现的错误加载问题。作者将EasyMotion插件放在了正确的位置,但加载时却出现了错误。作者提供了下载链接和之前放置插件的位置,并列出了出现的错误信息。 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • FeatureRequestIsyourfeaturerequestrelatedtoaproblem?Please ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了logistic回归(线性和非线性)相关的知识,包括线性logistic回归的代码和数据集的分布情况。希望对你有一定的参考价值。 ... [详细]
  • 微软头条实习生分享深度学习自学指南
    本文介绍了一位微软头条实习生自学深度学习的经验分享,包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性,并提供了一些建议。 ... [详细]
  • 2018年人工智能大数据的爆发,学Java还是Python?
    本文介绍了2018年人工智能大数据的爆发以及学习Java和Python的相关知识。在人工智能和大数据时代,Java和Python这两门编程语言都很优秀且火爆。选择学习哪门语言要根据个人兴趣爱好来决定。Python是一门拥有简洁语法的高级编程语言,容易上手。其特色之一是强制使用空白符作为语句缩进,使得新手可以快速上手。目前,Python在人工智能领域有着广泛的应用。如果对Java、Python或大数据感兴趣,欢迎加入qq群458345782。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • 展开全部下面的代码是创建一个立方体Thisexamplescreatesanddisplaysasimplebox.#Thefirstlineloadstheinit_disp ... [详细]
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社区 版权所有