您的当前位置:首页正文

angularJs使用ng-repeat遍历后选中某一个的方法

2023-12-07 来源:站点网
导读<div ng-click='click(element1)'>{{element1}}</div>如果是ng-repeat<div ng-repeat="a in b" ng-click='click(a)'></div>在controller里$scope.click=function(e){ console.log(e);}

1、html代码如下所示:

 <div> <button ng-repeat="t in deptName" class="deptDiv" ng-class="{'deptDivOnclick':selected==t.name}" ng-click="showDeptEmps(t.name )">{{ t.name }} </button> </div>

2、angular代码如下所示:

 $scope.showDeptEmps = function (dName) { $scope.selected = dName; //设置点击按钮背景颜色 };

其中:

$scope.deptName = [{name;"部门1"},{name;"部门2"},{name;"部门3"},{name;"部门4"}];

3、CSS代码如下所示:

.deptDiv { margin: 10px; width: 30%; font-size: 27px; background-color: #A1CF6D; color: white; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; } .deptDivOnclick { background-color: #008000; }

以上这篇angularJs使用ng-repeat遍历后选中某一个的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

小编还为您整理了以下内容,可能对您也有帮助:

angularjs中使用ng-repeat渲染页面,点击元素,如何知道点击的哪个元素

<div ng-click='click(element1)'>{{element1}}</div>

如果是ng-repeat

<div ng-repeat="a in b" ng-click='click(a)'></div>

在controller里

$scope.click=function(e){

console.log(e);

}

angularjs中用ng-repeat生成几个radio,怎么设置radio的默认选中项

两种解决式:

式1:升级1.4.4版本该问题已经修复;

式2:

ng-repeat遍历象候先按照key排序……所建议json内容改数组某字段作数组项属性

如何在angularJS深层嵌套ngRepeat中获取不同层级的$index

var appData = [

{

name: 'C++从入门到放弃',

author: 'dreamapple',

books: [

{name: 'github'},

{name: 'google'},

{name: 'nodejs'},

{name: 'react'}

]

},

{

name: 'Java从入门到跑路',

author: '呵呵哒',

books: [

{name: '雪碧'},

{name: '百事可乐'},

{name: '鸡尾酒'}

]

}

];

现在有这么一个要求,我需要将上面的那个 appData

循环出来,其中还要循环出来 books

里面的每一项,然后每一个 books

里面的每一项都可以进行删除,也可以给每一个 books

数组里面添加新的一项。

(1)循环出来这个 appData

数据还是很容易的,通过嵌套的 ngRepeat

很方便的就可以搞定了。

(2)关于嵌套我们能够使用的索引是 $index

,但是两层以上的话,如果每一层嵌套都使用 $index

作为索引的话,势必会引起混乱。这个时候就需要我们想一些办法去得到每一层的索引。

(3)我们目前比较好的一个做法就是通过 ngInit

指令,然后在循环开始的时候将每一层的索引保存在一个变量中,然后就可以在循环的不同层级之间使用了。

(4)我们还需要定义另一个数组 vm.tempItem

,这个数组也用于循环,循环出来的每一项用作被添加项的数据模型。

注意:循环 books

数组我们还有一些需要注意的地方,我们要使用 track by

语法,不然每次增加或者删除 books

里面的内容时, books

每一项的 $index

不会发生变化,那么就不好进行删除操作了。

我把里面的重点部分单独拿了出来,然后大家一起来看一看:页面部分:

<ul class="list-group" ng-repeat="item in vm.appData" ng-init="outerIndex = $index">

<h3>{{item.name}}<span class="outer-index">outerIndex:{{outerIndex}}</span></h3>

<h4>{{item.author}}</h4>

<li class="list-group-item">

<ul class="list-group">

<li class="list-group-item" ng-repeat="v in item.books track by $index" ng-init="innerIndex = $index">

{{v.name}} <span class="inner-index">innerIndex:{{innerIndex}}</span><button class="btn btn-danger" ng-click="vm.removeItem(outerIndex, innerIndex)">删除</button>

</li>

<li class="list-group-item">

<form class="form-inline">

<input class="form-control" ng-model="vm.tempItem[$index]" type="text">

<button class="btn btn-primary" ng-click="vm.addItem(outerIndex)">添加一项</button>

</form>

</li>

</ul>

</li>

<hr ng-show="!$last">

</ul>

控制器部分:

function removeItem(outerIndex, innerIndex) {

vm.appData[outerIndex].books.splice(innerIndex, 1);

}

我们可以先看控制器里面的函数, removeItem

这个函数有两个参数,一个是 outerIndex

,一个是 innerIndex

,其中 outerIndex

表示的是第一层循环的 $index

索引, innerIndex

表示的是第二层的 $index

索引。每次删除一项我们都需要知道是删除第一层循环中哪一个对象中的哪一项。

在页面中我们通过 ng-init="outerIndex = $index"

保存了第一层循环的 $index

,通过使用 ng-init="innerIndex = $index"

保存了第二层循环的 $index

。所以接下来的操作都很方便了。

如果对我上面所说的还没有很好理解的话,你可以尝试自己练习一下。下面是源码部分:

HTML部分

<head>

<meta charset="UTF-8">

<title>1</title>

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css">

<link rel="stylesheet" href="../lib/jsonFormater/jsonFormater.css">

<script src="http://cdn.bootcss.com/jquery/2.0.0/jquery.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>

<script src="../lib/jsonFormater/jsonFormater.js"></script>

<script src="../../angular-1.4.5/angular.js"></script>

<script src="app.js"></script>

<style>

.outer-index {

color: #FF0000;

background-color: #f8f8f8;

padding: 3px;

border-radius: 6px;

}

.inner-index {

color: #00AA00;

background-color: #f8f8f8;

padding: 3px;

border-radius: 6px;

}

</style>

</head>

<body>

<div class="container-fluid" ng-controller="AppController as vm">

<div class="row">

<div class="col-md-6">

<ul class="list-group" ng-repeat="item in vm.appData" ng-init="outerIndex = $index">

<h3>{{item.name}}<span class="outer-index">outerIndex:{{outerIndex}}</span></h3>

<h4>{{item.author}}</h4>

<li class="list-group-item">

<ul class="list-group">

<li class="list-group-item" ng-repeat="v in item.books track by $index" ng-init="innerIndex = $index">

{{v.name}} <span class="inner-index">innerIndex:{{innerIndex}}</span><button class="btn btn-danger" ng-click="vm.removeItem(outerIndex, innerIndex)">删除</button>

</li>

<li class="list-group-item">

<form class="form-inline">

<input class="form-control" ng-model="vm.tempItem[$index]" type="text">

<button class="btn btn-primary" ng-click="vm.addItem(outerIndex)">添加一项</button>

</form>

</li>

</ul>

</li>

<hr ng-show="!$last">

</ul>

</div>

<div id="show-container" class="col-md-6">

<h3>vm.appData:</h3>

<div id="json-container"></div>

</div>

</div>

</div>

</body>

JavaScript部分

(function() {

angular.mole('app', [])

.controller('AppController', AppController);

AppController.$inject = ['$scope'];

function AppController($scope) {

var vm = this;

// 初始化原始数据

var appData = [

{

name: 'C++从入门到放弃',

author: 'dreamapple',

books: [

{name: 'github'},

{name: 'google'},

{name: 'nodejs'},

{name: 'react'}

]

},

{

name: 'Java从入门到跑路',

author: '呵呵哒',

books: [

{name: '雪碧'},

{name: '百事可乐'},

{name: '鸡尾酒'}

]

}

];

vm.appData = appData;

vm.tempItem = [];

vm.addItem = addItem;

vm.removeItem = removeItem;

config();

function addItem(outerIndex) {

if(vm.tempItem[outerIndex]) {

vm.appData[outerIndex].books.push({

name: vm.tempItem[outerIndex]

});

vm.tempItem[outerIndex] = '';

vm.jf.doFormat(vm.appData);

}

else {

alert('添加项不能为空!')

}

}

function removeItem(outerIndex, innerIndex) {

vm.appData[outerIndex].books.splice(innerIndex, 1);

vm.jf.doFormat(vm.appData);

}

function config() {

var options = {

dom : '#json-container',

tabSize: 2,

quoteKeys: true,

imgCollapsed: "../lib/jsonFormater/images/collapsed.gif",

imgExpanded: "../lib/jsonFormater/images/expanded.gif",

isCollapsible: true

};

vm.jf = new JsonFormater(options);

vm.jf.doFormat(vm.appData);

}

}

})();

angularjs中后端传给前端map集合怎么遍历出每个值?

angularjs是一个很强大的JavaScript框架,强大到我看了半个小时写出来一个基本的angularjs项目(本人是标准的后台开发人员).

angularjs获取map的value值很简单{{map.key}},那么在未知key的时候怎么获取key了

<td ng-repeat="(x,y) in map">{{y}}</td>
<td ng-repeat="(x,y) in map">{{x}}</td>

当遇到value可能为null的时候

<td ng-repeat="(x,y) in map">{{y || " "}}</td>

angularjs中后端传给前端map集合怎么遍历出每个值?

angularjs是一个很强大的JavaScript框架,强大到我看了半个小时写出来一个基本的angularjs项目(本人是标准的后台开发人员).

angularjs获取map的value值很简单{{map.key}},那么在未知key的时候怎么获取key了

<td ng-repeat="(x,y) in map">{{y}}</td>
<td ng-repeat="(x,y) in map">{{x}}</td>

当遇到value可能为null的时候

<td ng-repeat="(x,y) in map">{{y || " "}}</td>

angularjs 怎么用多个多选框来控制ngrepeat的一个筛选

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>test</title>

<script src="angular.js"></script>

<script>

var myApp = angular.mole("myApp", []);

    myApp.filter('myfilter',function(){

        return function(input,toggle){

            var tmp = [];

            angular.forEach(input,function(value,key){

                switch(toggle){

                    case 'a':

                        if(value>0)

                            tmp.push(value);

                        break;

                    case 'b':

                        if(value>2)

                            tmp.push(value);

                        break;

                    case 'c':

                        if(value<4)

                            tmp.push(value);                    

                        break;

                    default:

                        tmp = input;

                }

            });

            return tmp;

        };

    });

    myApp.controller("testCtrl", function($scope){

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

        $scope.toggle = '';

    });

</script>

</head>

<body>

<div ng-app="myApp">

  <div ng-controller="testCtrl">

    <ul>

      <li ng-repeat="item in items | myfilter:toggle">{{item}}</li>

    </ul>

    <input type="checkbox"  ng-model="toggle" ng-true-value="'a'" />a

    <input type="checkbox"  ng-model="toggle" ng-true-value="'b'" />b

    <input type="checkbox"  ng-model="toggle" ng-true-value="'c'" />c

  </div>

</div>

</body>

</html>

追问差不多这样吧。。。把ab后面的break去掉就是我想要的

angularjs 可以从ng-repeat中循环出五条数据吗

循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任。有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去。

用AngularJS就爽多了,语法和JSP类似:

?

1.2

3.4

5.6

7.8

9.10

11.12

13.14

15.16

17.18

19.20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<!doctype html>

<html ng-app>

<head>

<meta charset="utf-8">

<title>ng-repeat directive</title>

</head>

<body>

<table ng-controller="CartController">

<caption>我的购物车</caption>

<tr>

<th>序号</th>

<th>商品</th>

<th>单价</th>

<th>数量</th>

<th>金额</th>

<th>操作</th>

</tr>

<tr ng-repeat="item in items">

<td>{{$index + 1}}</td>

<td>{{item.name}}</td>

<td>{{item.price | currency}}</td>

<td><input ng-model="item.quantity"></td>

<td>{{item.quantity * item.price | currency}}</td>

<td>

<button ng-click="remove($index)">Remove</button>

</td>

</tr>

</table>

<script src="../lib/angularjs/1.2.26/angular.min.js"></script>

<script>

function CartController($scope) {

$scope.items = [

{name: "雷柏(Rapoo) V500 机械游戏键盘 机械黄轴", quantity: 1, price: 199.00},

{name: "雷柏(Rapoo) V20 光学游戏鼠标 黑色烈焰版", quantity: 1, price: 139.00},

{name: "AngularJS权威教程", quantity: 2, price: 84.20}

];

$scope.remove = function (index) {

$scope.items.splice(index, 1);

}

}

</script>

</body>

</html>

ng-repeat指令生命在需要循环内容的元素上,items和控制器上的变量名对应,item是为数组中单个对象起的别名。$index可以返回当前引用对象的序号,从0开始,另外还有$first、$middle、$last可以返回布尔值,用于告诉你当前元素是否是集合中的第一个中间的最后一个元素。

站点网还为您提供以下相关内容希望对您有帮助:

angularjs中用ng-repeat生成几个radio,怎么设置radio的默认选中项

式1:升级1.4.4版本该问题已经修复;式2:ng-repeat遍历象候先按照key排序……所建议json内容改数组某字段作数组项属性

angularjs中使用ng-repeat渲染页面,点击元素,如何知道点击的哪个...

{{element1}} 如果是ng-repeat 在controller里 scope.click=function(e){ console.log(e);}

angularjs 可以从ng-repeat中循环出五条数据吗

{{item.quantity * item.price | currency}} Remove function CartController($scope) { scope.items = [

angularjs中后端传给前端map集合怎么遍历出每个值?

angularjs获取map的value值很简单{{map.key}},那么在未知key的时候怎么获取key了 {{y}} {{x}} 当遇到value可能为null的时候 {{y || " "}}

angularjs ng-repeat可以含有表达式吗

Error: [ngRepeat:dupes]这个出错提示具体到题主的情况,意思是指数组中有2个以上的相同数字。ngRepeat不允许collection中存在两个相同Id的对象 For example: item in items is equivalent to item in items track by $id...

如何在angularJS深层嵌套ngRepeat中获取不同层级的$index

(1)循环出来这个 appData 数据还是很容易的,通过嵌套的 ngRepeat 很方便的就可以搞定了。(2)关于嵌套我们能够使用的索引是 $index ,但是两层以上的话,如果每一层嵌套都使用 $index 作为索引的话,势必...

AngularJs ng-repeat指令中怎么实现含有自定义指令的动态html

在ng-repeat中,含有动态的html,而这些html中含有自定义指令。因为希望实现一个能够复用的table,所以定义了一个指令myStandTable,指令代码大概如下:var myCommon = angular.module("myCommon",[]);myCommon.directive("my...

如何使用angularjs处理动态菜单

4. 这样只有路由是动态载入了,关于每个路由对应的js,如果你也想实现 动态载入的话,估计就需要使用类似 requirejs 的东西,比如 marcoslin/angularAMD · GitHub 或者 atian25/angular-lazyload · GitHub 或者自己写一个...

angularjs写一个判断的点击事件

angularjs给div添加点击事件是通过ng-click来实现的。写法: 在$scope范围内定义的函数可以直接引用。1、完整的html代码: {{course.Name}} 2、增加事件的Open

angularjs 通过ng-repeat显示双重菜单,怎么解决

按照你表述的意思以及结合你的代码发现,你上面productInfoList有多少个对象就会重复多少个二级菜单 建议把下面的ui抽离出来或者把上面的那个ngrepeat写在下面 加个div

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top