标签: ng-repeat

Ang-JS中的Angular JS绑定范围数据形成

我在$ 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 ng-repeat

2
推荐指数
1
解决办法
5572
查看次数

Dygraphs不使用ng-repeat

我是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是有效的.当然,像我在这里直接在视图中绘制图形是没有意义的,但我仍然想知道为什么它不起作用.我在这里错过了一些一般性观点吗?

dygraphs angularjs ng-repeat

2
推荐指数
1
解决办法
1921
查看次数

在ng-repeat内生成ng模型

我一直在阅读一些主题,但无法找到解决这个问题的方法.

我试图在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.

这可能吗?当我尝试上述方法时,没有显示出来.我在这做错了什么?

javascript for-loop angularjs ng-repeat angular-ngmodel

2
推荐指数
1
解决办法
927
查看次数

angularjs ng-repeat按数字顺序排序字符串数组

我有一个带有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

javascript angularjs ng-repeat angularjs-ng-repeat

2
推荐指数
1
解决办法
3389
查看次数

在ng-repeat中解析html

我现在一直在寻找几个小时,而且在使用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/

谢谢.

html json angularjs ng-repeat

2
推荐指数
1
解决办法
1094
查看次数

鼠标悬停时AngularJS图像源更改

我试图在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>&nbsp;&nbsp;{{item.profileItem}}</span>
            </a>
        </div>
    </li>       
</ul>
Run Code Online (Sandbox Code Playgroud)

在a中,<div> ng-init将初始图标设置为变量(itemsrc),等效于JSON对象中指定的图标路径.ng-mouseoverng-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)

javascript jquery angularjs ng-repeat

2
推荐指数
1
解决办法
7529
查看次数

如何使用AngularJS从ng-repeat中删除数组中的对象?

我有一个像[{...},{...}]这样的对象的数组,我用ng-repeat输出.然后我有一个删除按钮,其中包含删除它的功能.

是否有一种简单的方法可以在AngularJS中删除它,也许使用$ index?或者我需要在每个对象上指定一个ID作为属性?

angularjs ng-repeat

2
推荐指数
1
解决办法
2万
查看次数

Angularjs ng-repeat基于值的运行总计

在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.

  1. 项目1 2
  2. 项目2 5
  3. 第3项9

running-total angularjs ng-repeat

2
推荐指数
1
解决办法
2225
查看次数

AngularJS在单行表上多次重复重复

我试图显示一个表,其中包含父对象和子对象列表中的项.是否可以使用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)

angularjs ng-repeat

2
推荐指数
1
解决办法
8699
查看次数

ng重复怪异的行为

我无法相信我无法做到由两个数组组成的简单跟随对象

{"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)

任何人都知道为什么它不起作用.

它正确显示密钥,但无法在列表中进行迭代,因此未显示名称且控制台中未显示任何错误

谢谢

angularjs ng-repeat angularjs-ng-repeat

2
推荐指数
1
解决办法
41
查看次数