使用场景：用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 index

        vm.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;

        //     }

        // };

    }

)

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

  1. mysql while,loop,repeat循环，符合条件跳出循环

    1.while循环 DELIMITER $$ DROP PROCEDURE IF EXISTS `sp_test_while`$$ CREATE PROCEDURE `sp_test_while`( ...

  2. java双线程调用同一个对象+锁

    两个线程(Thread)调用同一个对象(使用Runnable接口的对象ThreadJob) 误区:下一个线程会从上一个线程结束的地方开始 正解:如 public domd implements Run ...

  3. 多个子域名前端网站调用同一个webAPI时session混用问题

    session机制: 当程序需要为某个客户端的请求创建一个session的时候,服务器首先检查这个客户端的请求里是否已包含了一个session标识 - 称为session id,如果已包含一个sess ...

  4. angular自定义指令 repeat 循环结束事件；limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

  5. Lua循环结构while循环、repeat 循环、for循环_学习笔记03

    Lua循环结构while循环.repeat 循环.for循环 while语法结构 while 循环条件 do 循环体  end --1.输出1到100 index = do print(index) ...

  6. Okhttp 多次调用同一个方法出现错误java.net.SocketException: Socket closed

    Okhttp 多次调用同一个方法出现错误java.net.SocketException: Socket closed https://blog.csdn.net/QQiqq1314/article/ ...

  7. Python中random模块在主函数中设置随机种子是否对于调用的函数中的随机值产生影响？

    一个问题,加入我有一个工程文件,在main函数里面调用random模块,设置随机种子,主函数中的随机种子的设置是否会影响主函数所调用的函数中的随机值? 实际上这个问题非常重要,比如你在跑网络的时候,初 ...

  8. Winform同步调用异步函数死锁原因分析、为什么要用异步

    1.前言 几年前,一个开发同学遇到同步调用异步函数出现死锁问题,导致UI界面假死.我解释了一堆,关于状态机.线程池.WindowsFormsSynchronizationContext.Post.co ...

  9. Python中函数、类、模块和包的调用

    初学python阶段,大多数人对函数.类.模块和包的调用都搞得不是很清楚,这篇随笔就简单的进行说明. (1)函数 当函数定义好之后,可以直接调用. 比如:def summ(add1,add2),那么 ...

随机推荐

  1. iOS6新特征：UICollectionView介绍

    http://blog.csdn.net/eqera/article/details/8134986 1.1. Collection View 全家福: UICollectionView, UITab ...

  2. PHP 文件夹操作「复制、删除、查看大小」迭代实现

    "既然递归能很好的解决,为什么还要用迭代呢"?主要的原因还是效率问题-- 递归的概念是函数调用自身,把一个复杂的问题分解成与其相似的多个子问题来解决,可以极大的减少代码量,使得程序 ...

  3. curl及postman专题

    一. 步骤 1: 下载cURL工具 使用您的Windows机器从cURL web站点下载最新版本的cURL: (1) 通常情况下,多数的Windows用户可以从官网下载页面http://curl.ha ...

  4. 《转载》Spring MVC之@RequestBody, @ResponseBody 详解

    引言: 接上一篇文章讲述处理@RequestMapping的方法参数绑定之后,详细介绍下@RequestBody.@ResponseBody的具体用法和使用时机: 简介: @RequestBody 作 ...

  5. 面向过程（POP）、面向对象（OOP）、面向接口（IOP）、面向切面（AOP）

    面向过程:典型的是C/C++的结构体,结构体里只有变量,没有处理变量的方法,需要专门编写处理变量的方法. 面向对象:ArrayList<Integer> list=new ArrayLis ...

  6. 汗，Google又调整了编译工具(升级SDK先备份!!!)

    1./tools 下的apkbuilder消失了 方法一.用老版本ADT中的apkbuilder(apkbuilder.bat--windows) 方法二.重新生成build.xml文件 2.aapt ...

  7. VC++ : error LNK2001: unresolved external symbol "__declspec(dllimport) public: __thiscall std::basic_string<wchar_t,struct std::char_traits<wchar_t>

    最近学习Google Breakpad,将其用在了自己的项目中,编译的版本为VS2010,没有什么问题.但是为了和之前的程序兼容,需要使用VS2008版本的程序,于是又编译了VS2008版本的代码,但 ...

  8. 获取URL参数值

    function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*) ...

  9. [转]阿里巴巴数据库连接池 druid配置详解

    一.背景 java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,又不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色 ...

  10. 修改linux文件权限

    Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...