在ngView中动态添加新的表单域 - Angularjs

我使用路由将不同的模板加载到ngView中。其中一个模板有一个简单的控制器，其中包含一组联系人。我在这里想要做的事情就像通过单击一个链接（ngclick）调用一个函数一样简单，并将一个新对象添加到数组中，我希望这个对象会反映在我的UI中。在ngView中动态添加新的表单域 - Angularjs

这件事情是这样的：

$scope.contacts = [{name='', email=''}]; 

<li ng-repeat="con in contacts"> 
    <input type="text" ng-model="con.name"/> 
    <input type="email" ng-model="con.email"/> 
</li> 
<li> 
    <a href ng-click="addContact()">add</a> 
</li> 

$scope.addContact = function() { 
    $scope.contacts.push({name='', email=''}); //-- i can use either $scope or this to reference the array and works. 
}

因此，UI与初始值呈现良好的的addContact函数被调用的点击，我看到的价值推（长度= 2），但随后的功能在angularjs评估之后，数组似乎重置为一个元素（lenght = 1）。

我不确定是否因为使用ngView而发生这种情况。我的意思是，我回顾了这个例子（http://code.angularjs.org/1.0.3/docs/api/ng.directive:ngController），我没有看到我在这里想要做的很多不同之处，差异是我使用ngView的路由。

小提琴：http://jsfiddle.net/fdDph/

帮助深表感谢。

来源

2012-12-17 user1791567

这应该起作用。你可以提供一个[小提琴]（http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/）显示你的问题？ –

控制器是否让$ scope.contacts再次被调用？那会让它变黑。只需要初始值'[{name =''，email =''}];' –

Mark：小提琴将和我在上面提供的url中的例子类似，唯一的区别是我使用的是模板。不知道如何使路由在jsfiddle上工作。 Mathew：我猜angularjs出于某种原因重新绑定，就像我调用加载模板并在调用离开函数addContact（）时空白阵列一样。所以，我的问题是，是否需要告诉angularjs不要在ng-click之后手动执行或手动绑定？ – user1791567

在你的小提琴，你在NG-显示数组的长度重置为1：

<span ng-hide="contacts.length = 1">

做到这一点，它的工作：

<span ng-hide="contacts.length == 1">

来源

2012-12-19 04:32:24

顺便说一句，也会起作用，因为{{expression}}在集合中有对象时会返回true。 – Mahbub

非常感谢你们。我感谢您的帮助。 – user1791567

这是更新的小提琴的作品：http://jsfiddle.net/fdDph/9/ – mkelley33

{name='', email=''}是错误的语法顺便说一句，应该是{name:'', email:''}

来源

2012-12-18 19:28:53 Mahbub

你是对的。我编写代码片段时出错。我的实现包含json的正确定义。任何有关如何解决初始问题的建议？ – user1791567

这里是小提琴：http://jsfiddle.net/fdDph/ – user1791567

这里是一个非常清晰的小提琴：http://jsfiddle.net/fdDph/2/ 仍然不起作用 – user1791567

在ngView中动态添加新的表单域 - Angularjs

回答

相关问题