个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
关闭。这个问题需要details or clarity .它目前不接受答案。
想改善这个问题吗？通过 editing this post 添加详细信息并澄清问题.
7年前关闭。
Improve this question
在 angular.js 中点击按钮可以在表格中添加行吗？
我对 angular 完全陌生，所以也许是一个学习问题。
我知道使用 jquery 执行此操作并附加 html 文本，但是当我有行的 html(如部分)时，如果有更优雅的方式以 angular 执行此操作。
最佳答案
在 angularjs 中，您想让模型驱动 View ，任何 DOM 操作都应该在指令中进行(您自己的自定义指令或包含在 angular 库中的指令)。
幸运的是，angular 附带了一些非常有用的指令可供使用。 ng-repeat 非常适合向 View 中的表添加新行的任务。
考虑这个 Example
HTML
<body ng-controller="ExampleCtrl">
<h1>Person List</h1>
<fieldset>
<legend>Create Person</legend>
<input type="text" ng-model="name" placeholder="Name" ><br />
<input type="number" ng-model="age" placeholder="Age" ><br />
<input type="text" ng-model="title" placeholder="Title" ><br />
<button type="button" ng-click="addPerson()">Add Person</button>
</fieldset>
<table border="1" cellpadding="10">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Title
</th>
<th>
</th>
</tr>
</thead>
<body>
<tr ng-repeat="person in people">
<td>
{{ person.name }}
</td>
<td>
{{ person.age }}
</td>
<td>
{{ person.title }}
</td>
<td>
<button type="button" ng-click="removePerson($index)">Remove Person</button>
</td>
</tr>
</body>
</table>
</body>
function ExampleCtrl($scope){
$scope.people = [
{name:'Jon', age: 30, title: 'Developer'},
{name:'Mike', age: 37, title: 'Manager'},
{name:'Allen', age: 50, title: 'CEO'}
];
$scope.addPerson = function(){
var person = {
name: $scope.name,
age: $scope.age,
title: $scope.title,
};
$scope.people.push(person);
};
$scope.removePerson = function(index){
$scope.people.splice(index, 1);
};
}
ng-repeat="person in people" Angular 将呈现
<tr>对于在
$scope 上定义的 people 数组中的每个项目我们的 Controller 。
<tr>在下一个摘要周期期间的 View 中。
ng-repeat 中隔离。指示。
关于angularjs - 在 angular.js 中点击按钮可以在表格中添加行吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21295117/
27
4
0
menu Home Events Technical Schedule
我试图阻止触发默认 anchor 链接和 onclick 事件。 这是 HTML 代码: Google 我正在尝试使用以下 jQuery 代码阻止任何重定向的发生: $("#mylink").cli
我想在单击父 div 上的任意位置时切换我的 div，除非单击 anchor 元素。因此，例如，如果我单击示例中的第一个文本，我希望它切换，但在我的示例中的第二个文本上，我不希望它切换。 JSFidd
我在通过 jQuery 伪造 anchor 点击时遇到问题:为什么我的thickbox在我第一次点击输入按钮时出现，但第二次或第三次却没有出现？ 这是我的代码: Link 当我直接点击链接时，它总是
我已经从 Mootools 切换到 jQuery，因为我认为它有更好的支持。我有这样的 HTML: Opcje Opcje Opcje Opcje Opcje Opcje Opcje JS
我是一名优秀的程序员,十分优秀！