AngularJS实现单独作用域内的数据操作
更新时间：2016年09月05日 11:49:23 作者：MakingChoice
这篇文章给大家介绍了利用AngularJs如何实现ng-repeat内各个小的子作用域单独数据绑定。有需要的小伙伴们可以参考借鉴，下面来一起看看吧。
照例先看效果
下面是这个例子的代码：
<!DOCTYPE html>
<html lang="en" ng-app="scApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/angular.min.js" type="text/javascript"></script>
</head>
<body ng-controller="scController">
<div>
<div ng-repeat="con in content">
<input type="text" ng-model="con.num1" ng-change="changeNum1(con)"/>
<input type="text" ng-model="num2" value="con.num2"/>
<input type="text" ng-model="con.total" ng-change="changeTotal(con)"/>
</div>
</div>
</body>
<script>
var app=angular.module("scApp",[])
.controller("scController",["$scope", function ($scope) {
$scope.num2=2;
$scope.content=[
{
num1:1,
num2:3,
total:3,
},
{
num1:2,
num2:3,
total:6,
},
{
num1:1,
num2:6,
total:6,
}
];
$scope.changeNum1= function (con) {
con.total=con.num1*con.num2;
};
$scope.changeTotal= function (con) {
con.num1=con.total/con.num2;
}
}])
</script>
</html>
总结
其实方法非常简单，只需要在每个ng-repeat中传入具体的每一个数据分组就可以实现，例如本例子中的ng-change="changeNum1(con)"<code/>这样就实现了单独的小的数据作用域的控制。
以上就是这篇文章的全部内容，希望对大家学习或使用AngularJS能有所帮助，如果有疑问可以留言交流。
相关文章
这篇文章主要给大家介绍了将angular-ui的分页组件封装成指令的方法，文中介绍的非常详细，相信会对大家的学习或者工作觉有一定的参考价值，需要的朋友下面来一起看看吧。2017-05-05
本篇文章主要介绍了angular 中的自定义指令之详解API，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
今天小编就为大家分享一篇Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇对angularJs中自定义指令replace的属性详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要为大家介绍了Angular ViewChild组件间通信demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了AngularJS实时获取并显示密码的方法,涉及AngularJS数据绑定及显示相关操作技巧,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了关于 angularJS的一些用法的相关资料,需要的朋友可以参考下2017-11-11
Angular中使用Intersection Observer API实现无限滚动效果
这篇文章主要介绍了Angular中使用Intersection Observer API实现无限滚动,实现原理为 在data下面加一个loading元素 如果此元素进入视窗 则调用api获取新的数据加到原来的数据里面,这时loading就会被新数据顶下去,感兴趣的朋友一起看看吧2023-12-12
Angular设计模式hierarchical injector实现代码复用模块化
这篇文章主要为大家介绍了Angular设计模式hierarchical injector实现代码复用模块化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
在Angular.JS中可以使用数组或对象创建一个下拉列表选项。关于Angular.js中select的基础相信大家应该都已经了解了，那么下面这篇文章主要给大家介绍了Angular2中select用法之设置默认值与事件的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
最新评论