ng-repeat循环出来的部分调用同一个函数并且实现每个模块之间不能相互干扰

使用场景:用ng-repeat几个部分,每个部分调用同一个函数,但是每个模块之间的功能不能相互干扰

问题:在用repeat实现.content块repeat的时候打算这样做:新建一个空的数组(nmber_arr),因为数组里面的length可以决定repeat出几个content块,这样我就可以通过控制数组里面的length来实现repeat几个.content块;顺着这个思路我做了一个add按钮,希望在点击add按钮的时候number_arr的length会相应的增加一个,于是想到了用push操作:点击一次按钮往number_arr里面增加一个类容:代码:
HTML:
<button class="btn btn-primary demo-btn" ng-click="host.add_input()">add</button>
<div class="content" ng-repeat="x in host.number_arr">
<button type="button" class="btn btn-primary" ng-click="host.add(x,'count')">add</button>
<button type="button" class="btn btn-primary" ng-click="host.dec(x,'count')">dec</button>
</div>
js:
vm.number_arr = [];
var number_object = {
count: 0
}
function add_input(){
if (vm.number_arr.length<3) {
vm.number_arr.push (number_object);
}
}
然后点击add按钮的时候只能出现一次repeat效果,于是就纳闷了,,,,,
解决:angula repeat数组的时候里面的值是不能一样的,比如:如果 vm.number_arr = [1,1,1];其实函数是会报错的,因为里面的值是一样的,而我这里bush进去的只是对象的一个指针,它们实际指向的是内存中的同一个值,看了网上的资料,如果可以在repeat后面加上:track by index:ng-repeat="x in host.number_arr track by $index"或者使用angular copy(): vm.number_arr.push(angular.copy(number_object));这样解决了repeat的问题
接下来做add和dec的部分:
问题:我是用数组对象里面的count的值关联到input里面的value。所以这里我可以通过对count的操作实现对input输入框value的控制,于是想到:将对对象数组里面的值作为参数传到add和dec函数里面:
HTML:
<button type="button" class="btn btn-primary" ng-click="host.add(x.count)">add</button>
<button type="button" class="btn btn-primary" ng-click="host.dec(x.count)">dec</button>
js:
function add(num){
if (num < 500) {
num++;
}else{
num = 500;
}
};
然后给将函数加到按钮上,点击的时候input的值并没有什么反应
解决:想起一句话:函数是按值传递的,这里x.count实际上就是一个值,把这个值作为一个参数传给参数,函数会把这个值进行加减操作,但是要注意:其实这里的x.count在函数执行前后是没有发生变化的,换句话说,函数只是将一个数字进行了加减操作,然后并不会返回什么,当然这样就不会在视图上有任何变化;换了个思路,改变参数的形式,让函数的值能和数组对象里面的属性值(count)相互关联起来:
html:
<button type="button" class="btn btn-primary" ng-click="host.add(x,'count')">add</button>
<button type="button" class="btn btn-primary" ng-click="host.dec(x,'count')">dec</button>
js:
function add(obj,s){
if (obj[s] < 500) {
obj[s]++;
}else{
obj[s] = 500;
}
};
需要说明的一点:x in repeat中的x实际是:对应的那个对象,如果是第一条input那么就是对应的第一个数组对象:arr[0],实际上这是一个指针,因此我这里这里使用两个参数,第一个是指针,用于函数和数组对象的属性相互关联,第二个参数是对应的属性值,让函数知道我操作的是对象的哪个值,需要说明的一点:引用数组对象的属性值,我们一般是这样的写法:arr[0].count;但是我这里采用的是:arr[0]['count'],为什么采用这样的方式呢:如果采用第一种方式。js代码需要写成:
js:function add(obj){
if (obj.count < 500) {
obj.count++;
}else{
obj.count = 500;
}
};
html:参数变成:x;
虽然在这个函数里面不会影响到功能,但是如果下次需要复用这个add函数就需要改变数组对象里面的属性名和函数里面的的执行对象名,这样不利于函数的复用

具体代码:

html:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" href="src/bootstrap.min.css"><script src="src/angular.min.js"></script><script src="src/jquery.min.js"></script><script src="src/bootstrap.min.js"></script><script src="demo.js"></script><link rel="stylesheet" href="demo.css" /><style>input {display: inline-block;height: 30px;width: 300px}.content {height: 30px;margin-bottom: 20px;}button {height: 30px;line-height: 30px;}.demo-btn {display: block;width: 100%;margin-top: 30px;}</style>
</head><body ng-app="myApp" ng-controller="formCtrl as host"><div class="container"><div class="content" ng-repeat="x in host.number_arr track by $index"><input type="text" ng-model="x.count" /><button type="button" class="btn btn-primary" ng-click="host.add(x,'count')">add</button><button type="button" class="btn btn-primary" ng-click="host.dec(x,'count')">dec</button></div><div ng-show="host.number_arr.length < 3"><span class="count">{{host.count}}</span><button class="btn btn-primary demo-btn" ng-click="host.add_input()">add</button></div></div>
</body></html>

js:

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {var vm = this;console.log(vm)//ng-repeat里面的内容不能是同一个值,如果是同一个值需要给repeat加上track by indexvm.add_input = add_input;vm.dec = dec;vm.add = add;vm.number_arr = [];var number_object = {count: 0}vm.count = 3;function add_input() {if (vm.number_arr.length < 3) {vm.number_arr.push(angular.copy(number_object)); //copy执行的操作是copy一份新的内存空间,返回的是这个新内存空间的一个指针//还有一点:如果不使用copy的话push到数组里面的只是一个指针,而这些指针指到的位置又是同一个内存空间,//但是angular是不允许repeat一个同样的内存空间,//解决的方法一:repeat出来的需要给打上标记,通过track by index来实现,还有一种方法就是通过angularcopy的方法来解决vm.count = vm.count - 1;}}function dec(obj, s) {  //因为函数是按值传递的,//应数组对象arr[{conunt: 0}]的方法有两种:一:arr[0].count二:arr[0]['count'];//这里是使用第二种方法来实现加减的//为什么不使用第一种方式实现呢:第一种方式不利于函数复用if (obj[s] > 0) {obj[s]--;} else {obj[s] = 0;}};function add(obj, s) {if (obj[s] < 500) {obj[s]++;} else {obj[s] = 500;}};//第二种方式// function add(obj){//     if (obj.count < 500) {//         obj.count++;//     }else{//         obj.count = 500;//     }// };
    }
)

 

转载于:https://www.cnblogs.com/wangrongxiang/p/6059935.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/573008.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java mac pos_pos终端mac国密(sm4)算法(java实现)

概念理解mac算法是(Message Authentication Codes 消息认证码算法)&#xff0c;是含有密钥散列函数算法。主要通过异或运算&#xff0c;再配合其他加密算法实现mac值的运算&#xff0c;用于校验。实现过程将需要加密计算的字符串转换为16进制字符串例如&#xff1a;密钥&#x…

php-rpm.conf,在新安装的宝塔面板中php无法启动起来

在新安装的宝塔面板中php无法启动起来去看了网站的报错信息是&#xff1a;[Wed Aug 15 11:00:09.827025 2018] [proxy:error] [pid 4264] (2)No such file or directory: AH02454: FCGI: attempt to connect to Unix domain socket /tmp/php-cgi-56.sock (*) failed[Wed Aug 15…

HTML 列表中的dl,dt,dd,ul,li,ol区别及应用

HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 HTML 列表中的dl,dt,dd,ul,li,ol区别及应用 工具/原料 html&#xff0c;dw软件方法/步骤 1无序列表 无序列表是一个项目的列表&#xff0c;此列项目使用粗体圆点&#xff08;典型的小黑圆圈&#xff09;进行标记。 无序列表始于 <…

php pdo mysql 乱码,php pdo连接数据库 解决中文乱码问题(wordpress mysql 问号?? ??)...

摘要&#xff1a;PHP 用pdo连接数据库时出现中文乱码问题解决办法1.array(PDO::MYSQL_ATTR_INIT_COMMAND > "set names utf8"),在与数据库建立连接的时候的第四个参数 example: $dbh new PDO($PHP 用pdo连接数据库时出现中文乱码问题解决办法1.array(PD…

HashMap 与 ConcurrentHashMap

一、概述 二、HashMap 1、数据结构 2、应用 3、不要用 HashMap 做本地缓存 一般我们声明 HashMap 时&#xff0c;使用的都是默认的构造方法&#xff1a;HashMap<K, V>&#xff0c;但是它还有另外一个构造方法&#xff1a;HashMap(int initialCapacity, float loadFactor)…

自然语言10_分类与标注

sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId1005269003&utm_campaigncommission&utm_sourcecp-400000000398149&utm_mediumshare http://www.tuicool.com/articles/feAfi2 NLTK读书笔记 — …

php会不会被人工智能取代,为什么这9种工作不会被人工智能取代?

人工智能(AI)和机器学习(ML)的能力正在逐渐扩大&#xff0c;尽管如此&#xff0c;总会有一些任务所要求的质量是技术难以复制的&#xff0c;例如创造力、同情心和情感意识。有很多任务非常难以实现自动化&#xff0c;而且有些职业总是需要人的技能。我们从了解技术的各种局限性…

git中Please enter a commit message to explain why this merge is necessary.

Please enter a commit message to explain why this merge is necessary. 请输入提交消息来解释为什么这种合并是必要的 git 在pull或者合并分支的时候有时会遇到这个界面。可以不管(直接下面3,4步)&#xff0c;如果要输入解释的话就需要: 1.按键盘字母 i 进入insert模式 2.修…

php代码显示灰色,哀悼日-实现网页变灰色的方法

哀悼日期间经常需要把网页设置为灰色状态&#xff0c;现总结一下方法以备后用&#xff0c;在网站的CSS文件中的顶部加入如下代码&#xff1a;html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale1);-webkit-filter: grayscale(100%);}或者&#xff1a;html *{…

yum阿里云镜像源

阿里云是最近新出的一个镜像源。得益与阿里云的高速发展&#xff0c;这么大的需求&#xff0c;肯定会推出自己的镜像源。阿里云Linux安装镜像源地址&#xff1a;http://mirrors.aliyun.com/ CentOS系统更换软件安装源第一步&#xff1a;备份你的原镜像文件&#xff0c;以免出错…

abp框架mysql连接配置,abp框架连接数据库

ABP框架搭建项目系列教程基础版完结篇经过前面十二篇的基础教程&#xff0c;现在终于该做个总结了。回顾第一篇&#xff0c;我们建议新手朋友们先通过ABP官网的启动模板生成解决方案&#xff0c;因为这样既快速又准确&#xff0c;不会因为项目的搭建&#xff0c;而让新手畏而却…

【分布式】Zookeeper在大型分布式系统中的应用

一、前言 上一篇博文讲解了Zookeeper的典型应用场景&#xff0c;在大数据时代&#xff0c;各种分布式系统层出不穷&#xff0c;其中&#xff0c;有很多系统都直接或间接使用了Zookeeper&#xff0c;用来解决诸如配置管理、分布式通知/协调、集群管理和Master选举等一系列分布式…

php 数组当链表,php数组和链表的区别总结

PHP中数组和链表的区别从逻辑结构来看1.、数组必须事先定义固定的长度(元素个数)&#xff0c;不能适应数据动态地增减的情况。当数据增加时&#xff0c;可能超出原先定义的元素个数&#xff1b;当数据减少时&#xff0c;造成内存浪费&#xff1b;数组可以根据下标直接存取。2、…

Egret资源管理解决方案

关于egret开发H5页游&#xff0c;资源管理和加载的一点看法。 一 多json文件管理 二 资源归类和命名 三 exml文件编写规范 四 资源预加载、分步加载、偷载 五 资源文件group分组 六 ResUtils&#xff0c;多json文件管理类 七 ResUtils&#xff0c;资源组加载管理类 八 开发中遇…

java 等待唤醒机制,Java线程等待唤醒机制

记录面试过程中被问到的几个需要手写代码的小案例1.请手写出线程的等待唤醒机制案例中两个线程&#xff1a;SyncSetThread设置学生信息&#xff0c;SyncGetThread用来获取学生信息&#xff0c;在Student实体中提供一个标记属性flag&#xff0c;记录当前是否有数据。等待唤醒机制…

Xshell实现Windows上传文件到Linux主机

经常有这样的需求&#xff0c;我们在Windows下载的软件包&#xff0c;如何上传到远程Linux主机上&#xff1f;还有如何从Linux主机下载软件包到Windows下&#xff1b;之前我的做法现在看来好笨好繁琐&#xff0c;不过也达到了目的&#xff0c;笨人有本方法嘛&#xff1b; 我是怎…

java实现键盘移动图片,快速移动视图与键盘

我试图在键盘出现时向上移动视图&#xff0c;在键盘隐藏时向下移动 .我遇到的问题是高度似乎不同&#xff1a;KBH1输出216&#xff0c;KBH2输出260 .这导致视图向下移动得比最初移动的距离更远 .我该如何纠正这个&#xff1f;extension UIViewController {func addKeyboardFunc…

python-变量操作-字符串

python对变量&#xff08;不同数据类型&#xff09;的操作 数字操作字符串操作列表操作元组操作集合操作字典操作Python3 中有六个标准的数据类型&#xff1a;Number&#xff08;数字&#xff09;、String&#xff08;字符串&#xff09;、List&#xff08;列表&#xff09;、T…

织梦自适应php源码,DEDE织梦PHP源码响应式建筑设计类网站织梦模板(自适应手机端)...

模板名称&#xff1a;响应式建筑设计类网站织梦模板(自适应移动端) 利于SEO优化模板详情&#xff1a;织梦最新内核开发的模板&#xff0c;该模板属于企业通用、HTML5响应式、建筑设计类企业使用&#xff0c;一款适用性很强的模板&#xff0c;基本可以适合各行业的企业网站&…

nyoj 题目5 Binary String Matching

Binary String Matching 时间限制&#xff1a;3000 ms | 内存限制&#xff1a;65535 KB难度&#xff1a;3描述Given two strings A and B, whose alphabet consist only ‘0’ and ‘1’. Your task is only to tell how many times does A appear as a substring of B? For…