AngularJS 使用ng-repeat和ng-model的问题-Article-IT72.COM

AngularJS 使用ng-repeat和ng-model的问题

Home / Article MrLee 2016-8-26 2762

菜鸟入门，今天在Web项目中要用到ng-repeat动态创建一个table表，但是呢，每行里面有一个input输入框，然后这个值双向绑定就难倒我了。首先是大家都会遇到的问题，写一个相同的ng-model名称，这样的结果就是你只要改其中一个的值，那么其它的都会随之跟着变。后来查下了度娘，也解决了此问题。
首先，肯定是要解决一个ng-model的问题，我们直接把ng-model绑定对象的一个属性，然后在onChange里面调用函数的时候把这个ng-model传进去即可。解决之后还是相当简单，不过作为菜鸟的我们，起初还是相当的痛苦的。下面举例说明。正所谓，有例有真相嘛！程序员最喜欢做的事情就是Ctrl+C，然后Ctrl+V啦！

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

以上是js代码，下面是界面代码

<div ng-controller="DetailsController">

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

    </div>

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

本文链接:https://www.it72.com/9905.htm