mvvm双向绑定实现全选和反选

最新推荐文章于 2022-07-20 15:31:25 发布

qq_31182399

最新推荐文章于 2022-07-20 15:31:25 发布

阅读量213

点赞数

文章标签： javascript css html angular

本文链接：https://blog.csdn.net/qq_31182399/article/details/107712304

版权

	//全选按钮默认未选中
		$scope.ischecked = false;
		//全选按钮事件
	    $scope.updateAllChecked = function () {
	        if ($scope.ischecked) {
	            $scope.ischecked = false;
	            _.forEach($scope.batchData, function (n) {
	                n.checked = false;
	            });
	        } else {
	            $scope.ischecked = true;
	            _.forEach($scope.batchData, function (n) {
	                n.checked = true;
	            });
	        }
	    }
	    //每一个小按钮事件
	    //用jquery的方法操作DOM使全选按钮选中添加attr无效用prop添加属性
	    $scope.updateChecked = function () {
	        var newArray = [];
	        newArray = _.filter($scope.batchData, function (o) { return !o.checked });
	        if (newArray.length > 0) {
	            $scope.ischecked = false;
	            $("#AllChecked").removeAttr("checked");
	        } else {
	            $scope.ischecked = true;
	            $("#AllChecked").prop("checked", "checked");
	        }
	    }
	   	 <body>	
    		<td style="width:10%;">
                     <input type="checkbox" id="AllChecked" name="name" style="height:75%;width:100%;" ng-click="updateAllChecked()" />
              </td>
              <td style="width:10%;">
                     <input type="checkbox" name="name" ng-model="item.checked" style="height:75%;width:100%;" ng-change="updateChecked()" />
               </td>
         </body>
         	
		jquery attr()和prop()的区别:
		1、attribute理解为“特性”，property理解为为“属性”
		
		2、建议具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。
		
		3、attribute是一个特性节点，每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点，它是一个类数组的容器。
		attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。而property就是一个属性，
		是一个以名值对(name=”value”)的形式存放在Object中的属性。
		
		4、<a href="http://www.baidu.com" target="_self" class="btn">百度</a>
		这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属性，
		也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
		
		5、<a href="#" id="link1" action="delete">删除</a>
		这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，
		<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。