我正在尝试使用生成可编辑列表ng-repeat.我想提醒用户在继续之前更新任何编辑,因此我正在使用动态ng-form创建"嵌套"表单,因为文档说我可以对这些动态创建的输入使用验证.
虽然这似乎在HTML中工作,但我没有看到如何在控制器中访问那些动态创建的表单和相关的验证字段.具体来说,当用户更改输入时,我使用表单$ dirty属性调出一个按钮来告诉用户提交更改.到现在为止还挺好.但是,一旦提交了更改,我希望$setPristine()在该字段上指示已设置更改.在我允许提交主表单之前,可能还有其他方法可以确保在每个输入上提交更改,但这是我能想到的最好的方法.
不幸的是,即使文档说如果我将ng-form命名为它将传播到$scope对象,我找不到访问它的方法. $scope.dynamic_form未定义.
这是一个显示我的意思的plunker:
谢谢!
[编辑]只是为了添加问题,这个特定示例的工作原理是添加到ng-click动态创建的输入上:
ng-click="namesForm.name.$setPristine();clean()"
但我仍然无法访问控制器中动态创建的表单.例如,我希望添加一个观察程序,namesForm.name.$pristine以便我可以设置mainForm.$setValidity(false)子表单,$dirty以防止用户提交主表单,直到所有子表单更改都已提交.
简而言之,问题是如何在父控制器中访问动态创建的嵌套ngForm的验证值？
我有这些数据:
[{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
{"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
{"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]
当我在ng-repeat中按顺序id或年龄时,它会将数字排序为文本.由于我无法在任何地方发现这是一个问题,我猜我的代码存在问题.我创建了这个小提琴:http://jsfiddle.net/vsbGH/1/抱歉模板,但jsfiddle不允许在html框中.无论如何,这是加载和排序数据的代码:
//user data
app.service('People', function() {
var People = {};
People.details = [{"id":"42","firstname":"Sarah","lastname":"Dilby","age":"40","cars":"Yaris"},
{"firstname":"Jason","lastname":"Diry","age":"5","id":"5"},
{"id":"6","firstname":"Bilson","lastname":"Berby","age":"1","cars":"Tipo"}]
return People;
});
//list ctrl
controllers.listCtrl = function ($scope,People) {
$scope.people = People.details;
$scope.sortList = function(sortname) {
$scope.sorter = sortname;
}
}
这是模板的ng-repeat部分:
<tr ng-repeat="person in people | orderBy:sorter ">
<td>{{person.id | number}}</td>
<td>{{person.firstname}} </td>
<td>{{person.lastname}} </td>
<td>{{person.age | number}}</td>
<td>{{person.cars}} </td>
</tr>
非常感谢,如果你能帮助我理解为什么数字数据不是作为数字排序,以及为什么它作为文本排序.
我有一个列表,我使用ng-repeat迭代:用户可以使用向上箭头和向下箭头图标与列表项进行交互,点击它们我只需更改"列表中元素的顺序" "这就是角度建议改变模型,变化自动反映在视图中.
<div ng-repeat="item in list">
{{item.name}}
<div class="icon-up-arrow" ng-click="moveUp($index);"></div>
<div class="icon-down-arrow" ng-click="moveDown($index);"></div>
</div>
moveUp中的逻辑: -
$scope.moveUp= function(position){
var temp=list[position-1];
list[position-1]=list[position];
list[position=temp];
};
上面的代码完全正常,类似的是将项目向下移动的逻辑.但我想解决的问题是如何放动画？我知道angular会自己处理绑定视图和模型,但是有没有办法放入动画,因为在按下向下箭头图标时视图会更新？
我有时会对AngularJS有严重的麻烦.所以我的控制器中有一个基本数组
$scope.items = ["a","b","c"]
我正在我的模板中重复项目数组ng-repeat ="item in items".到目前为止超级直播.经过几次UX操作后,我想将一些新东西推送到我的阵列.
$scope.items.push("something");
因此,50%的时间,新元素被添加到视图中.但其他50%,没有任何反应.这就像超级沮丧; bc如果我把它包装在$ scope.$ apply()中,我得到了"$ digest in progress"错误.将其包装到$ timeout也无济于事.
当我使用Chrome扩展程序检查我的元素范围时; 我可以看到新数据存在且$ scope.items值是正确的.但是视图并没有考虑将其添加到DOM中.
谢谢!
我有一个奇怪的错误,不幸的是,我不能用jsfiddle复制.除了下面的代码片段,我已经注释掉了我的整个代码(除了库等).有什么明显的东西我不明白吗？有任何想法吗？
这适用于打印:(0,0)(0,1)(1,0)(1,1)
<div ng-repeat="i in list">
<div ng-repeat="j in list2">
<div>
({{$parent.$index}} {{$index}})
</div>
</div>
</div>
但是,这段代码打印:(0,0)(1,1)(0,0)(1,1)
<div ng-repeat="i in list">
<div ng-repeat="j in list2">
<div ng-if="1">
({{$parent.$index}} {{$index}})
</div>
</div>
</div>
我的控制器是:
$scope.list = [1, 2];
$scope.list2 = [1, 2];
我正试图在多个地方重用我的HTML视图的一部分.我想重用的部分是HTML表格中的表格单元格.问题是我在ng-repeat中的自定义指令正在做有趣的事情.我在jsFiddle上重现了这个问题.jsFiddle中有两个HTML表.第一个是ng-repeat,表格单元格写在视图中,第二个是来自指令my-element的表格单元格.Chrome开发工具报告呈现的HTML看起来像这样.请注意,自定义元素只出现一次,位于表格之外.
呈现HTML
<div ng-controller="MyCtrl" class="ng-scope">
table1
<table class="table table-hover">
<tbody><!-- ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
<td class="ng-binding">Name: Mike</td>
<td class="ng-binding">Age: 20</td>
</tr>
<tr ng-repeat="p in people" class="ng-scope">
<td class="ng-binding">Name: Peter S</td>
<td class="ng-binding">Age: 22</td>
</tr>
</tbody>
</table>
<br>table2
<my-element class="ng-binding">Name: Age: </my-element>
<table class="table table-hover">
<tbody>
<!-- ngRepeat: p in people -->
<tr ng-repeat="p in people" class="ng-scope">
</tr>
<tr ng-repeat="p in people" class="ng-scope">
</tr>
</tbody>
</table>
</div>
来源HTML
<div ng-controller="MyCtrl">
table1
<table class="table …html javascript angularjs angularjs-directive angularjs-ng-repeat
使用的对象列表ng-repeat.假设此列表非常长并且用户滚动到底部以查看某些对象.
当用户观察对象时,新项目将添加到列表顶部.这导致观察对象改变其位置,即用户突然在观察对象的相同位置看到其他东西.
当添加新项目时,您将如何将观察对象保持在同一位置？
我想根据角度控制器中函数的返回值设置div的位置
以下在FireFox和chrome中工作正常但在Internet Explorer中{{position($index)}}%被解释为文字字符串值,因此无效
<div ng-repeat="item in items" style="left:{{position($index)}}%"></div>
以下是此问题的示例:
var app = angular.module('app', []);
app.controller('controller', function($scope) {
$scope.items=[1,2,3,4,5,6,7,8,9,10];
$scope.position=function(i){
var percent =[5,10,15,20,25,30,35,40,45,50,55,60,65,70];
return percent[i+1];
}
});
这是一个小提琴演示
有没有人有关于如何纠正的建议？
html internet-explorer inline-styles angularjs angularjs-ng-repeat
我正在使用这样ng-repeat的orderBy过滤器渲染对象列表:
<li class="list-item" ng-repeat="item in items | orderBy:predicate:reverse">
我尝试对列表排序的变化进行动画制作已经证明令人沮丧,并且不值得分享.我在这里看到了Yearofmoo示例应用程序.
不幸的是,这个演示并不是我想要实现的.我需要在orderBy定义更改后将其放置在新顺序中时为给定列表项的X位置设置动画.我试图通过css转换和绝对定位来实现这一点,但ng-repeat似乎重新创建了orderBy使动画成为真正挑战的列表项.
ng-repeat | orderBy(有或没有
ng-animate)？我正在尝试让Angular根据我的数据生成一个CSS滑块.我知道数据存在并且能够为按钮生成数据,但由于某种原因,代码不会填充ng-switch.当我检查代码时,我看到了两次(我知道这是正确的,因为我只有两个项目):
<div ng-repeat="assignment in assignments" ng-animate="'animate'" class="ng-scope">
<!-- ngSwitchWhen: {{assignment.id}} -->
</div>
我的实际代码:
<div ng-init="thisAssignment='one'">
<div class="btn-group assignments" style="display: block; text-align: center; margin-bottom: 10px">
<span ng-repeat="assignment in assignments">
<button ng-click="thisAssignment = '{{assignment.id}}'" class="btn btn-primary">{{assignment.num}}</button>
</span>
</div>
<div class="well" style="height: 170px;">
<div ng-switch="thisAssignment">
<div class="assignments">
<div ng-repeat="assignment in assignments" ng-animate="'animate'">
<div ng-switch-when='{{assignment.id}}' class="my-switch-animation">
<h2>{{assignment.name}}</h2>
<p>{{assignment.text}}</p>
</div>
</div>
</div>
</div>
</div>
编辑:这是我试图模仿,但动态数据.http://plnkr.co/edit/WUCyCN68tDR1YzNnCWyS?p=preview