标签: angularjs-ng-repeat

AngularJS - 使用ngRepeat指令的自定义过滤器

我想将自定义过滤器与ngRepeat指令一起使用.这就是我所拥有的

HTML:

<div ng-app="menuApp">
    <ul ng-controller="MenuCtrl">
        <li ng-repeat="item in menuItems | rootCategories">
            {{item.Name}}
        </li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

JS:

angular.module('menuApp', [])
    .filter('rootCategories', function() {
        return function(item) {
            return item.Parent == 0;
        };
    });

function MenuCtrl($scope) {
    $scope.menuItems = [{ "Id": 1, "Name": "Sweep", "Parent": 0 }];

    /*
    $scope.rootCategories = function(item) {
        return item.Parent == 0;
    };
    */
};
Run Code Online (Sandbox Code Playgroud)

我不想使用注释掉的方式来过滤我的项目,因为真正的过滤器将比提供的示例复杂.由于某些原因,输入参数"item"未定义,因此我什么也看不见.你能告诉我有什么问题吗?谢谢.

angularjs angularjs-ng-repeat

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

根据AngularJS中的动态内容显示/隐藏表格行?

我有一个HTML表格如下:

<table>
  <tr ng-show="showCats"><td>Cat</td><td>1</td></tr>
  <tr ng-show="showDogs"><td>Dog</td><td>2</td></tr>
  <tr ng-show="showCats"><td>Cat</td><td>4</td></tr>
  <tr ng-show="showDogs"><td>Dog</td><td>3</td></tr>
  <tr ng-show="showCats"><td>Cat</td><td>5</td></tr>
  <tr ng-show="showLizards"><td>Lizard</td><td>1</td></tr>
  <tr ng-show="showLizards"><td>Lizard</td><td>3</td></tr>
  <tr ng-show="showMice"><td>Mouse</td><td>5</td></tr>
  <tr ng-show="showMice"><td>Mouse</td><td>1</td></tr>
  <tr ng-show="showDogs"><td>Dog</td><td>3</td></tr>
</table>
Run Code Online (Sandbox Code Playgroud)

链接如下:

<a href="#" ng-click="showRows('all')">Show all</a>
<a href="#" ng-click="showRows('cats')">Cats</a>
<a href="#" ng-click="showRows('dogs')">Dogs</a>
<a href="#" ng-click="showRows('lizards')">Lizards</a>
<a href="#" ng-click="showRows('mice')">Mice</a>
Run Code Online (Sandbox Code Playgroud)

在点击动物类型时,Angular隐藏/显示每一行的正确方法是什么?我知道过滤器,但我的印象是这只适用于在Angular中使用生成的表ng-repeat.(此表是在服务器端生成的.)

我有一个工作解决方案,showAnimal根据点击的内容手动将每个变量设置为true/false,但这似乎是一种低效,不可扩展的方法.谢谢!

angularjs angularjs-ng-repeat

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

angularjs table:tr with category with ng-repeat with list

鉴于以下模型:

[{categoryName: "category1", items:[{name:"item1.1"}{name:"item1.2"},...]}, 
 {categoryName: "category2", items:[{name:"item2.1"},...]},...]
Run Code Online (Sandbox Code Playgroud)

我想创建这个表:

<table>
  <tr>
    <th>category1</th>
  </tr>
  <tr>
    <td>item1.1</td>
  </tr>
  <tr>
    <td>item1.2</td>
  </tr>
  ...
  <tr>
    <th>category2</th>
  </tr>
  <tr>
    <td>item2.1</td>
  </tr>
  ...
 </table>
Run Code Online (Sandbox Code Playgroud)

你会怎么用angularjs指令呢?

javascript html-table angularjs angularjs-ng-repeat

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

Angularjs中自定义指令的用途是什么?

我是angularjs的新手,很难理解自定义指令示例和相关的博客.

为什么我们使用它以及自定义指令的用法.(使用内置指令很容易理解和使用)

可以根据我们的需求编写自己的自定义指令吗?

角度js中自定义指令的需求是什么?

angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

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

从JSON中的值列表计算平均值

我有一个简单的ng-repeat,显示一个值列表(财务收入).如何计算此列表中的平均值?

<div ng-repeat="data in MyData">
    {{ data.income }}
</div>
<div>
    Average:
</div>
Run Code Online (Sandbox Code Playgroud)

哪个显示:

11
14
8
9
21
10
2
1
5
13
Run Code Online (Sandbox Code Playgroud)

谢谢

angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

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

Angular ... ng-repeat中单选按钮的名称

我有一个项目列表,其中包含一个具有固定列表值的字段.我想在表单中将这些显示为单选按钮.

我把代码简化了一下,简化了一下.

http://jsfiddle.net/my4k7Lo8/

HTML:

<div ng-app='MyApp'>
    <div ng-controller="MyCtrl">
        <form>
            <div ng-form ng-repeat="item in list" name="itemForm">
                <div style="border: 1px solid black">
                     <h4>Item {{$index}}</h4>

                    <label>
                        <input type="radio" name="color" ng-model="item.color" value="red" required />red</label>
                    <label>
                        <input type="radio" name="color" ng-model="item.color" value="blue" required />blue</label>
                    <label>
                        <input type="radio" name="color" ng-model="item.color" value="green" required />green</label>
                    <p ng-show="itemForm.color.$error.required">
                        Must choose a color
                    </p>
                    <p>Actual color is {{item.color}}</p>
                </div>
            </div>
        </form>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

JS:

angular.module('MyApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.list = [{
        // no color set yet
    }, { …
Run Code Online (Sandbox Code Playgroud)

radio-button angularjs angularjs-ng-repeat

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

Angularjs:过滤包含子字符串的ng-repeat中的项目

所以我有一个动态设置的范围变量:

$scope.month = 'June'; //this will be a runtime assignment
Run Code Online (Sandbox Code Playgroud)

我有一个数组(示例),我必须使用ng-repeat迭代:

$scope.dates = ['12 June, 2015', '12 April, 2015', '13 May, 2015' ];
Run Code Online (Sandbox Code Playgroud)

这是标记:

<div ng-repeat = "date in dates">
    {{date}}
</div>
Run Code Online (Sandbox Code Playgroud)

现在我想要实现的是在ng-repeat循环中,我只打印那些包含存储在$ scope.month中的月份的日期.如何使用过滤器执行此操作?

javascript angularjs angularjs-ng-repeat angular-filters

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

从angularjs的过滤器中对嵌套数组(2D数组)数组进行排序

我如何从angularjs的过滤器中对嵌套数组(2D数组)数组进行排序.这对我来说非常复杂.任何人都可以帮忙.感谢我.谢谢...

我有一个2D数组.现在我如何在ng-repeat中对它进行排序.

模板文件......

<ul>
  <span ng-repeat="list in lists">

    <li ng-repeat="list_ in list.list1 | orderBy:'name'">{{list_.name}}</li>
  </span>
</ul>
Run Code Online (Sandbox Code Playgroud)

JS档案......

$scope.lists = [
{
  no : 1,
  list1 : [{
  name : 'A'
},
{
  name : 'M'
}]},
{
  no : 2,
  list1 : [{
  name : 'B'
}]},
{
  no : 5,
  list1 : [{
  name : 'Z'
}]},
{
  no : 3,
  list1 : [{
  name : 'X'
},
{
  name : 'T'
}]}
]
Run Code Online (Sandbox Code Playgroud)

在这里

javascript multidimensional-array angularjs angularjs-ng-repeat angularjs-filter

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

保存输入文本框中ng-repeat中的所有值

我正在弄清楚如何通过ng-repeat单击按钮来保存输入文本框中输入的值.我已经看到这样的示例从文本框中获取值,用户可以单独保存每个文本框.以下是示例代码:

$scope.items=[1,2,3,4]

<div ng-repeat="item in items">
<input type="text" ng-model=item.id>
</div>
<button type="button" ng-click="saveAllValues()">Save</button>
Run Code Online (Sandbox Code Playgroud)

javascript angularjs ng-repeat angularjs-ng-repeat

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

Angular JS orderBy不与Dates合作

orderBy 功能不适用于我尝试使用的日期 ng-repeat

在这里,我想对基于的托管进行排序 executedOn

我想排序元素,最新日期应该反映在顶部.

有人能帮我吗

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {

    $scope.details = [
  {
    "id": 255463,
    "orderId": 226433,
    "status": 1,
    "executedOn": "25/Sep/17",
    "executedBy": "Person A",
    "executedByDisplay": "Person A",
    "cycleId": 4042,
    "cycleName": "Cycle A",
    "versionId": 21289,
    "versionName": "Version A",
    "issueKey": "A"
  },
  {
    "id": 255433,
    "orderId": 226403,
    "status": 1,
    "executedOn": "1/Mar/17",
    "executedBy": "Person B",
    "executedByDisplay": "Person B",
    "cycleId": 4041,
    "cycleName": "Cycle B",
    "versionId": 21289,
    "versionName": "Version A",
    "issueKey": "B"
  },
  {
    "id": 255432,
    "orderId": 226402,
    "status": …
Run Code Online (Sandbox Code Playgroud)

angularjs angularjs-ng-repeat angularjs-orderby

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