开发者社区> ghost丶桃子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

[Angularjs]ng-repeat中使用ng-model遇到的问题

简介:
+关注继续查看

写在前面

在ng-reapet中如何为ng-model双向绑定呢?在项目中确实遇到这样的问题,绑定了,但是在controller中获取不到它的值,确实挺奇怪的。

系列文章

[Angularjs]ng-select和ng-options

[Angularjs]ng-show和ng-hide

[Angularjs]视图和路由(一)

[Angularjs]视图和路由(二)

[Angularjs]视图和路由(三)

[Angularjs]视图和路由(四)

[Angularjs]ng-class,ng-class-even,ng-class-odd

[Angularjs]单页应用之分页

[Angularjs]国际化

一个例子

有这样一个人员列表,我们希望单击按钮对某人的姓名进行修改,这个时候我们就需要获取当前对象的某个属性,代码片段及视图如下所示:

复制代码
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ng-repeat和ng-model</title>
    <meta charset="utf-8" />
    <script src="JS/angular.min.js"></script>
    <script>
        var app = angular.module('app', []);
        app.controller('DetailsController', function ($scope) {

            $scope.pepoles = [{ 'id': 1, 'name': 'zhangsan', 'gender': '' }, { 'id': 2, 'name': 'zhangsan2', 'gender': '' }, { 'id': 3, 'name': 'zhangsan3', 'gender': '' }];
            console.log($scope.pepoles);

        });

    </script>
</head>
<body>

    <div ng-controller="DetailsController">

        <ul>
            <li ng-repeat=" p in pepoles">
                ID:{{p.id}}<br />
                name:{{p.name}}<br />
                gender:{{p.gender}}<br />
                <input type="text" name="name" value="{{p.name}}" ng-model="p.name" />  <button>更改</button>
            </li>
        </ul>

    </div>
</body>
</html>
复制代码

一般会这样写为按钮注册单击事件,单击后得到文本框绑定的属性的新值:

<button ng-click="changeName()">更改</button>

并在Controller中编写方法的实现,以及$http请求服务进行修改数据库。

            $scope.changeName = function () {
                console.log($scope.name);
            };

这样单击按钮后

并不能识别name属性。

但是可以通过另外的方法实现

                <input type="text" name="name" value="{{p.name}}" ng-model="p.name" />
                <button ng-click="changeName(p)">更改</button>
            $scope.changeName = function (item) {
                console.log(item);
            };

解决办法:直接将当前对象传到方法中或者传属性p.name。

网上还有另外一种解决方案,但是有个问题。

 <input type="text" name="name" value="{{p.name}}" ng-model="$parent.name" />

这种方式在controller中确实可以通过$scope.name拿到文本框的值,但是在视图中,修改一个其他的也会跟着改变。

最后就出现了这样的情况:

很明显这并不是我们想要的结果。

总结

在ng-repeat中ng-model的问题,原因是ng-model对controller中的$scope是不可见的,所以在使用repeat中的某个对象的属性的时候,最好还是将该对象或者该对象的值传到方法中。刚接触angularjs,不知道有没有更好的解决办法,这是在项目中遇到的一个问题,记录在此,希望你有个更好的解决方式,不妨留言,谢谢。

博客地址: http://www.cnblogs.com/wolf-sun/
博客版权: 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。
如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步!
再次感谢您耐心的读完本篇文章。http://www.cnblogs.com/wolf-sun/p/4749854.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
几款代码混淆器(DotFuscator, .NET Reactor, xenocode)(转)
刚刚无意中看到代码混淆器。留着以后用。 1、DotFuscator DotFuscator是VS里面一个自带的代码混淆器,VS——工具——Dotfuscator Community Edition具体使用方法,及产生的混淆效果,可参考:http://blog.csdn.net/netjxz/archive/2006/12/12/1439866.aspx 2、.NET Reactor .NET Reactor,这个非常小巧,免安装,而且不需要注册。
1157 0
asp.net core集成MongoDB
0、目录  整体架构目录:ASP.NET Core分布式项目实战-目录   一、前言及MongoDB的介绍  最近在整合自己的框架,顺便把MongoDBD的最简单CRUD重构一下作为组件化集成到asp.net core项目中,当然此篇文章中没有讲解mongodb的集群部署,等有机会分享一下。
437 0
Day 22: 使用Spring、MongoDB和AngularJS开发单页面应用
今天的《30天学习30种新技术》挑战,我决定使用Spring框架、MongoDB和AngularJS开发一个单页面应用。我很熟悉Spring和MongoDB,但是我没用配合Spring使用过AngularJS。今天我们将开发一个社交化的书签应用,类似我们几天前用EmberJS开发的那个。我在第二天介绍了AngularJS的基本知识,请参阅我的文章获取更多信息。本文使用最新版的Spring框架,即3.2.5.RELEASE,我们将不使用XML(连web.xml也不用)。我们将通过Spring的annotation支持来配置一切。我们将使用Spring MVC来创建一个REST后端。同时将Angu
0 0
angular25-ng-repeat命令
angular25-ng-repeat命令
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载