gpt4 book ai didi

JavaScript 将函数插入空白的 Angular 的 ng-repeat 数组中

转载 作者:行者123 更新时间:2023-11-29 23:55:22 25 4
gpt4 key购买 nike

首先让我说这不是一个重复的问题,我阅读了每个相关问题!我的编辑功能工作正常,更新数组的推送功能也工作正常,但我确定我从未碰过它,它只是停止工作了!

我要说我的 HTML 表单有 ng-model,没有拼写错误,用于帮助推送。 Angular 代码:

                $scope.add = function(id){

$scope.people.push({
name: $scope.name,
phone1: $scope.phone1,
phone2: $scope.phone2,
phone3: $scope.phone3,
email: $scope.email,
city: $scope.city,
state: $scope.state
});
//More code here that resets the forms input//
}

我的编辑功能有效,我的删除功能有效,只有这个,当我点击启动 add() 功能的按钮时,它会重置表单输入,但会将一个空白数组推送到我的 ng-repeat 列表中!

我有一个具有多个输入的表单,其中 ng-model 设置为任意值; name, phone1 ... 等等,而且 Angular 代码是正确的,那为什么这行不通呢?

<div class="centered" ng-show="addcont">
<form id="adder" name="commentForm" method="post">
<h2 class="formtitle">Add Contact</h2>
<table cellpadding="5" cellspacing="5">
<tr>
<td>Name</td>
<td>
<input class="edit" type="text" ng-model="name">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input class="edit" type="text" ng-model="email">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone1">
<input type="text" id="number" class="edit" maxlength="3" size="3" ng-model="phone2" /> -
<input type="text" id="number" class="edit" maxlength="4" size="5" ng-model="phone3" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<input class="edit" type="text" ng-model="city">
</td>
</tr>
<tr>
<td>State</td>
<td>
<input class="edit" type="text" ng-model="state">
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="button" value="Save" ng-click="add(); `showAdd()">
</td>
</tr>
</table>
</form>
</div>

重大更新!

我用的是JQuery的autotab函数,一注释掉,数组又正常传入了。
该函数用于上面提供的表单,并自动跳转到下一个输入。

函数如下:

<script>
$(document).ready(function(){
$('.edit').autotab();
});
</script>

最佳答案

每次都使用 Jquery 和 angular 并不合适

因此,我们应该使用 Angular 版本的自动选项卡。

因此,这是使用 Angular 自动标签解决的示例。

要添加的重要行是

$.autotab.selectFilterByClass = true;

    $.autotab.selectFilterByClass = true;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$('.edit').autotab();
$.autotab.refresh();
$scope.people = [];
$scope.add = function(id){
$scope.people.push({
name: $scope.name,
phone1: $scope.phone1,
phone2: $scope.phone2,
phone3: $scope.phone3,
email: $scope.email,
city: $scope.city,
state: $scope.state
});
setTimeout(function () {
$.autotab.refresh();
}, 1);
//More code here that resets the forms input//
}
});
<!DOCTYPE html>
<html>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-autotab/1.9.2/js/jquery.autotab.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<div class="centered">
<form id="adder" name="commentForm" method="post">
<h2 class="formtitle">Add Contact</h2>
{{people}}
<table cellpadding="5" cellspacing="5">
<tr>
<td>Name</td>
<td>
<input class="edit" type="text" ng-model="name">
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input class="edit" type="text" ng-model="email">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone1">
<input type="text" id="number" class="edit number" maxlength="3" size="3" ng-model="phone2" /> -
<input type="text" id="number" class="edit number" maxlength="4" size="5" ng-model="phone3" />
</td>
</tr>
<tr>
<td>City</td>
<td>
<input class="edit" type="text" ng-model="city">
</td>
</tr>
<tr>
<td>State</td>
<td>
<input class="edit" type="text" ng-model="state">
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input type="button" value="Save" ng-click="add()">
</td>
</tr>
</table>
</form>
</div>



</div>


</body>
</html>

请运行上面的代码片段

现在,您将代码插入数组可以使用 AUTO-TAB 正常工作。

HERE IS A WORKING DEMO

关于JavaScript 将函数插入空白的 Angular 的 ng-repeat 数组中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41820175/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com