2. 程式人生 > >angular1.x 簡單的全選功能

angular1.x 簡單的全選功能

阿新 • • 發佈：2019-01-07
var m1 = angular.module('testModule', ['ngRoute']); m1.controller("testController", ["$scope", "$location", function ($scope, $location) { //設定基本資訊 $scope.content = [ { id: 10, baseInfo: { name: 'hanker' }, orgCompanyName : 'ali'
}, { id: 11, baseInfo: { name: 'hanker' }, orgCompanyName : 'ali' }, { id: 12, baseInfo: { name: '222' }, orgCompanyName : 'ali' }, { id: 13
, baseInfo: { name: 'hanker111' }, orgCompanyName : 'baidu' }, { id: 14, baseInfo: { name: 'eeee' }, orgCompanyName : 'tenxun' } ]; //建立變數用來儲存選中結果 $scope.selected = []; //動作 和 id號 如果是add則把id號放入 selected陣列中
var updateSelected = function (action, id) { if (action == 'add' && $scope.selected.indexOf(id) == -1) $scope.selected.push(id); if (action == 'remove' && $scope.selected.indexOf(id) != -1) $scope.selected.splice($scope.selected.indexOf(id), 1); }; //更新某一列資料的選擇 $scope.updateSelection = function ($event, id) { console.log( id ); var checkbox = $event.target; console.log( checkbox ); var action = (checkbox.checked ? 'add' : 'remove'); updateSelected(action, id); }; //全選操作 $scope.selectAll = function ($event) { var checkbox = $event.target; var action = (checkbox.checked ? 'add' : 'remove'); // 遍歷這個 content 把所有的元素從selected中新增或刪除 for (var i = 0; i < $scope.content.length; i++) { var contact = $scope.content[i]; updateSelected(action, contact.id); } }; $scope.isSelected = function (id) { return $scope.selected.indexOf(id) >= 0; }; //如果資料長度 == 全選的 $scope.isSelectedAll = function () { return $scope.selected.length === $scope.content.length; }; }]);

相關推薦

angular1.x 簡單的全選功能

var m1 = angular.module('testModule', ['ngRoute']); m1.controller("testController", ["$scope", "$location", function ($scope, $location) {

js 簡單實現表單資料的增添，單項刪改，多項刪除，修改以及全選功能

// 新增商品函式 function add(){ // 獲取表單元素 var table = document.getElementById("order"); // 以表單的行數為索引插入行

jQuery實現簡單全選、反選、全不選功能

例子：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <titl

vue中實現全選功能

containe lda mod html ret model methods == -m <!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測

vim實現全選功能

bsp 最後一行 是我 全選 操作 網上 有效 沒有 內容 曾經也在找看看有沒有快捷的方法全選，但是網上很多都是重復，並且錯誤的，比如： 1,$y,這是什麽？要寫也要寫成:1,$y,但是我告訴你，寫成:1,$y是全部復制，不是全選 dG，這個就更加誤導人了，這是刪除光標所在

Vue實現全選功能

orm 點擊 fault highlight index otto vuejs tom guid https://cn.vuejs.org/v2/guide/forms.html <template> <div class="hello">

全選功能的實現(相容ie8，可以部分禁用)

注： 1.引數兩個，第一個引數為全選按鈕的選擇器，第二個引數為除全選按鈕外的其他複選框的父元素的選擇器，如果其父元素為table，選擇器要寫為 "table tbody"。 2.可有部分按鈕禁用(disabled)，例如 <!DOCTYPE html> <

怎樣新增設定GridView，CheckBox全選功能

GridView內CheckBox控制元件全選設定 不需要新增後臺程式碼操作，前端即可完成設定，如下： 前端程式碼： 1.設定javascript。 <html xmlns="http://www.w3.org/1999/xhtml" > <script type="text/jav

CSS與js--全選功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti

ant design 的table元件實現全選功能

需求：ant design 的table元件中，點選表頭的選擇框可以實現全選的效果，但有時根據業務需求，需要在表格外面新增一個選擇框，點選實現全選的效果，如圖所示。 實現方法： 1、新增一個checkbox 2、 在table元件中新增  rowSelection

javascript全選功能以及動態求和

效果圖1  圖2 程式碼 <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" conte

購物車的雙層recyclerview實現全選功能

main_check是最外層的複選框 main_check.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if(

實現全選/取消全選功能

這裡是使用jquery為前提： 方法一： /** * 繫結全選/取消全選 * @param checkAll 全選複選框 * @param checkOne 單個複選框 */ functio

vue配合elementUI完成全選功能

vue配合elementUI完成全選功能 <template> <div class="deliverySetting"> <div class="deliverySetting-btn"> <

React Native 單選，複選, 全選功能

簡單寫了一個ListView資料的單選和全選，刪除功能 利用JS的Map物件進行勾選，取消勾選和全選 方法簡單粗暴 單選功能見註釋的 單選邏輯 ， 單選功能不做全選 其餘未註釋的程式碼為複選和全選功能 /** * Created by

AngularJS--購物車全選/取消全選功能實現

剛學習angularJS，於是練習寫了一個類似於購物車的全選/取消全選的功能，主要實現的功能有： 1、勾選全選checkbox，列表資料全部被勾選，取消同理，用ng-model實現雙向繫結； 2、選中列表中的所有checkbox，全選也會被勾選；（這裡我想到的方法是給

JS：支援任意數量的分組checkbox全選功能（幾種方法的比較）

用JQ寫的支援任意數量的分組checkbox全選功能的超短程式碼,特點有兩個,一是短,二是擴充套件容易,不需要改動JS,只需要複製一組之後按照命名規則改下編號.   (為書寫簡便，以下都省略了checkbox的value，實際應用中，這當然是必須的，請自行注意新增) <

為DataGridView 新增複選框，實現全選功能

1、指定DataGridView的第一列為DataGridViewCheckBoxColumn 2、為第一列的標題欄新增一個CheckBox,假設為HeaderCheckBox同時為HeaderCheckBox定義好 MouseClick 和 KeyUp 事件priva

JavaScript實現全選功能

1、新建一個文件（用NotePad軟體，為了使得在瀏覽器中開啟不是亂碼，在軟體的檔案出找到編碼，將其修改為UTF-8編碼。或者點選谷歌瀏覽器中的右上角的三條槓，選擇更多工具->編碼->UTF-8），將其重新命名（例：第一個java script.html  

vim的全選功能，刪除

網上的方法五花八門，許多是直接複製的，沒有經過驗證 這裡給出自己的方法：ggvG 其實就是移動游標到檔案頭命令：gg 進入塊模式：v 移動游標到檔案尾：G 最後可以使用del刪除或者d命令刪除了，這樣的話最後一行還要再刪除一下， 不想麻煩在刪除一行的話，使用ggvG$命令即