Javascript 在AngularJS中迭代通过ng repeat生成的元素_Javascript_Html_Angularjs

Javascript 在AngularJS中迭代通过ng repeat生成的元素

javascript html angularjs

Javascript 在AngularJS中迭代通过ng repeat生成的元素,javascript,html,angularjs,Javascript,Html,Angularjs,我的app.js： var app = angular.module('factory', []); app.controller('Ctrl', function($scope){ $scope.users =[ {name: 'jimbo', info: ''}, {name: 'bobby', info: ''} ]; $scope.addAllInfos = function(){ }; }); my index.h

我的app.js：

var app = angular.module('factory', []);

app.controller('Ctrl', function($scope){
    $scope.users =[
        {name: 'jimbo', info: ''},
        {name: 'bobby', info: ''}
    ];

    $scope.addAllInfos = function(){

    };
});

my index.html：

<!DOCTYPE html>
<html ng-app="factory">

<head>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>

<body ng-controller="Ctrl">

    <div ng-repeat="user in users">
        Name: <input value="{{user.name}}"/><br>
        Tell me sth: <input/><br><br><br>
    </div>

    <button ng-click="addAllInfos()">add all infos</button>

</body>


名称：

告诉我某事：



添加所有信息

当点击“添加所有信息”时，我想通过使用ng repeat生成的所有用户进行迭代，并将每个“告诉我某事”输入保存在对象的info变量中。我如何使用Angular来实现这一点

您只需使用

ngModel

指令将每个重复输入绑定到

user.info

：

告诉我某事： 演示：

请注意，在这种情况下，

addAllInfo

功能可能会变得多余，因为双向数据绑定会自动为您填充

user

对象

第一个问题是addAllInfo（）函数

您的addAllInfo（）函数对视图/html不可用。您需要通过$scope或通过控制器类返回来公开函数

您可以这样做： $scope.addAllInfo=function（）{//code here}

这将允许您从主机上的ng click事件调用函数。

我想您要查找的是ng model属性。您还应该在输入字段中使用ng模型，而不是将值放入value属性中。这将允许您在Angular中完全控制双向绑定

这样您就不需要AddAllInfo函数了，Angular将跟踪中继器中每个对象的值和属性。代码如下所示

<div ng-repeat="user in users">
    Name: <input type="text" ng-model="user.name"/><br>
    Tell me sth: <input type="text" ng-model="user.info"/><br><br><br>
</div>


名称：

告诉我某事：

这是一个典型的非“角度思考”的例子。Angular不需要执行函数来执行此操作，双向绑定可以在不需要执行任何其他逻辑的情况下为您执行此操作。您还可以给我一个关于删除上下文中的用户的提示吗？因此，当每个div都有一个delete按钮时，如何使用angular实现从数组中删除正确的对象？您需要使用方法从

$scope.users

数组中删除项。这里有一个简单的例子：哇，谢谢你，好的。通过使用$index，您到底在调用什么？这是一个角度特定的命令吗？

ngRepeat

在循环中提供了一些有用的变量，其中一个是当前迭代

$index

。若要从数组中删除项，则需要它。