我在$ scope.data中有一组项目,其中包含"id","name"和"age"字段,这些项目使用ng-repeat指令显示在视图中.对于每组项目,都有一个相应的"编辑按钮".
我希望能够访问按下编辑按钮的特定项目集的值.
HTML:
<div ng-controller="Ctrl">
<div ng-repeat="i in data">
Name: {{i.name}}
Age: {{i.age}}
<form ng-submit="submit()">
<input type="text" ng-model="i.id"/>
<input type="submit" value="Edit" />
</form>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
脚本:
function Ctrl($scope)
{
$scope.data = [
{id:1,name:"Alex",age:22},
{id:2,name:"Sam", age:28}
];
$scope.submit = function() {
//access id of user for which edit was clicked
};
}
Run Code Online (Sandbox Code Playgroud)
这样做的正确方法是什么?
我是AngularJS的新手并使用dygraph构建仪表板.
试图将dygraphs网站上的示例代码放在ng-repeat-list中,只是为了测试.对于y中的每个x,预期相同的样本图.不幸的是,图表没有绘制,只是轴,控制台没有显示任何错误.
<li ng-repeat="x in y">
<div id="graph">
<script>
new Dygraph(document.getElementById("graph"),
[ [1,10,100], [2,20,80], [3,50,60], [4,70,80] ],
{ labels: [ "x", "A", "B" ] });
</script>
</div>
</li>
Run Code Online (Sandbox Code Playgroud)
如果我删除ng-repeat,它可以工作(单图) - 所以dygraphs-code是有效的.当然,像我在这里直接在视图中绘制图形是没有意义的,但我仍然想知道为什么它不起作用.我在这里错过了一些一般性观点吗?
我一直在阅读一些主题,但无法找到解决这个问题的方法.
我试图在ng-repeat内添加ng-model,如下所示:
<span ng-repeat="list in lists">
<input type="checkbox" ng-model="formData.checkboxes.{{ list.value }}"> {{ list.number }} {{ list.description }} <br/>
</span>
Run Code Online (Sandbox Code Playgroud)
列表值是这样的:
$scope.lists = [
{
value:'value1',
number: '1',
description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
},
{
value:'value2',
number: '2',
description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',
},
{
value:'value3',
number: '3',
description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ', },
];
Run Code Online (Sandbox Code Playgroud)
在ng-repeat循环中,我希望它构建一个像以下类似的ng模型formData.checkboxes.value1 formData.checkboxes.value2, formData.checkboxes.value3.
这可能吗?当我尝试上述方法时,没有显示出来.我在这做错了什么?
我有一个带有id的帖子列表
1,2,3,4,5,6,7,8,9,10,11,12
(json格式)ID是String类型.但是我想根据它的数字顺序命令它正常orderBy:'fiche.id'列表显示如下.
1,10,11,12,2,3,4,5,6,7,8,9
我希望输出是有序的 - 1,2,3,4,5,6,7,8,9,10,11,12
我现在一直在寻找几个小时,而且在使用ng-repeat检索时我似乎无法找到解析HTML代码的方法.我检查了$ sce.trustAsHtml但我不知道如何在我的代码中应用它.
html文件:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<h2>My Links</h2>
<table class="table table-bordered">
<thead>
<tr>
<td>Name</td>
<td>URL</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="stuff in myStuff()">
<td>{{stuff.name}}</td>
<td>{{stuff.url}}</td>
</tr>
</tbody>
</table>
</div>
Run Code Online (Sandbox Code Playgroud)
JavaScript的
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.myStuff = function() {
return [
{
'name':'Google',
'url':'<a href="http://google.com">Google</a>'
},
{
'name':'Yahoo',
'url':'<a href="http://yahoo.com">Yahoo</a>'
},
{
'name':'Microsoft',
'url':'<a href="http://microsoft.com">Microsoft</a>'
}
];
};
});
Run Code Online (Sandbox Code Playgroud)
它显示HTML源代码,但我希望它编译代码.我的JS方法有问题吗?一旦我弄明白,我将使用$ http指令将它应用于json文件.任何人都能解释一下吗?我的代码在http://jsfiddle.net/s2ykvy8n/
谢谢.
我试图在AngularJS中获得一个改变鼠标悬停的图标但是遇到了很大的困难.我的菜单是由Angular解释为HTML的JSON对象生成的.每个菜单项都是自己的对象,具有自己的标题,链接,图标和替代图标.
目前我的HTML是:
<ul ng-controller="MenuCtrl" class="ul">
<li class="profile-li" ng-repeat="item in profileItems" style="white-space:nowrap" width="250px">
<div width="200px">
<a href="{{item.link}}" class="return">
<div ng-init="itemsrc='{{item.icon}}'" ng-mouseover="itemsrc='{{item.alticon}}'" ng-mouseout="itemsrc='{{item.icon}}'" >
<img class="icon2" ng-src="{{itemsrc}}" style="display:inline; float:left;">
</img>
</div>
</a>
<a href="{{item.link}}" class="return">
<span style="display:inline; white-space:nowrap;"><br> {{item.profileItem}}</span>
</a>
</div>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
在a中,<div> ng-init将初始图标设置为变量(itemsrc),等效于JSON对象中指定的图标路径.ng-mouseover并ng-mouseout根据JSON值将此变量更改为不同的路径.然后<img>在内部<div>使用这个建立的变量作为它ng-src.
加载页面时,会<div>正确生成值(它们显示存储在JSON对象中的正确路径),但<img src>路径仍以括号({{item.icon}}或{{item.alticon}})表示,而不是实际路径(icon/assessment.png例如),这会导致要打破的形象.
以下是正在解释的JSON对象的示例:`
[
{
"contentItem": "Orders",
"link": "#orders",
"icon": "icon/orders.png",
"alticon": "icon/ordersb.png"
}, …Run Code Online (Sandbox Code Playgroud) 我有一个像[{...},{...}]这样的对象的数组,我用ng-repeat输出.然后我有一个删除按钮,其中包含删除它的功能.
是否有一种简单的方法可以在AngularJS中删除它,也许使用$ index?或者我需要在每个对象上指定一个ID作为属性?
在angularjs中工作并希望根据从数据中检索的值保持运行总计.以下代码始终返回所有项目的完整总值.
<div ng-repeat="child in pItem.childItems | orderBy:'displayOrder'" ng-init="$parent.totalValue = $parent.totalValue + child.field[0].value">
Run Code Online (Sandbox Code Playgroud)
将其从父范围更改为子范围将清除每次重复的totalValue.因此,值始终等于该项的子值.
我正在寻找类似于以下内容的东西.其中Item1的值为2,Item2的值为3,Item3的值为4.
我试图显示一个表,其中包含父对象和子对象列表中的项.是否可以使用ng-repeat执行此操作?for循环看起来像这样.
foreach(var parent in list)
foreach (var child in parent)
print(parent.1)
print(parent.2)
print(child.1)
print(child.2)
Run Code Online (Sandbox Code Playgroud)
下面是每行的外观的一般概念.
<table>
<tr ng-repeat="parent in list">
ng-repeat="child in parent"
<td>parent.item1</td>
<td>parent.item2</td>
<td>parent.item3</td>
<td>child.item1</td>
<td>child.item2</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud) 我无法相信我无法做到由两个数组组成的简单跟随对象
{"M":
[
"Alpha",
"Beta",
"Zeta"],
"F":
[
"Alpha",
"Omega"
]}
Run Code Online (Sandbox Code Playgroud)
我想做的就是有一个嵌套的ng-repeat,如下所示
<a
class="list-group-item list-group-item-info"
ng-repeat="(key,list) in vm.result">
{{key}}
<a
class="list-group-item"
ng-repeat="name in list">
{{name}}
</a>
</a>
Run Code Online (Sandbox Code Playgroud)
任何人都知道为什么它不起作用.
它正确显示密钥,但无法在列表中进行迭代,因此未显示名称且控制台中未显示任何错误
谢谢