深究AngularJS——ng-checked（回寫：帶真實案例程式碼）

阿新 • • 發佈：2019-01-19

1.需求

在新增頁面實現一個checkbox的選擇，然後在詳情頁面展示時，會自動選上之前被選中的。

2.新增頁面

看官最好將這個程式碼複製過去看看效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller 
="myCtrl" >
    選擇
    <div ng-repeat="item in list">
        <input type="checkbox" name="tagName" value="item.id" ng-click="select(item.id,$event)"> {{item.shortName}}
    </div>
    結果：{{result}}
</div>
<script>    
    var app = angular.module('myApp', []);
    app.controller('myCtrl' 
, function($scope) {
        //建立checkbox用的
        $scope.list=[{"id":1,"shortName":"張三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}];
        //儲存已選
        $scope.result = [];
        //觸發事件
        $scope.select = function(id,event){            
            console.log(event)//列印看看這是什麼，有利於理解
            console.log(action)

            var 
 action = event.target;
            if(action.checked){//選中，就新增
                if($scope.result.indexOf(id) == -1){//不存在就新增
                    $scope.result.push(id);
                }
            }else{//去除就刪除result裡
                var idx = $scope.result.indexOf(id);
                if( idx != -1){//不存在就新增
                    $scope.result.splice(idx,1);
                }
            }
        };
    });
</script>
</body>
</html>

3.詳情展示

//假設新增頁面的結果是：$scope.result = [3,2];

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl" >
    回寫時設定不可選，即設ng-disabled="true"
    <div ng-repeat="item in list">
        <input type="checkbox" name="tagName"  ng-checked="isSelected(item.id)" value="item.id" ng-disabled="true" > {{item.shortName}}
    </div>
    結果：{{result}}
</div>

<script>    
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        //建立checkbox用的
        $scope.list=[{"id":1,"shortName":"張三"},{"id":2,"shortName":"李四"},{"id":3,"shortName":"王二"}];

        //在新增頁面得到的結果
        //你會發現，順序也不會影響結果
        $scope.result = [3,2];

        //被選中條件：ng-checked的結果為true
        $scope.isSelected = function(id){          
            return $scope.result.indexOf(id)!=-1; 
            //只要返回的結果為true，則對應的checkbox就會被選中，
            //所以我的思路是看存新增頁面的結果裡是否含有當前id即value值，
            //有就返回的true，沒有就返回false
        };
    });
</script>
</body>
</html>

深究AngularJS——ng-checked（回寫：帶真實案例程式碼）

1.需求在新增頁面實現一個checkbox的選擇，然後在詳情頁面展示時，會自動選上之前被選中的。 2.新增頁面看官最好將這個程式碼複製過去看看效果。 <!DOCTYPE htm

用WebStorm進行Angularjs 2開發（環境篇：Windows 10，Angular-cli方式）

自己學習使用了Angular JS 1一段時間，由於沒有具體的專案進行嘗試加上其它研究工作的影響，就擱置了一段時間。在與同事討論技術選型時，才知道Angular JS 2的差別之大（孤陋了，莫見笑），所以決定弄弄Angular 2。WebStorm是進行JS和前

深究AngularJS——校驗（非form表單）

為什麼是非form表單？因為基本上都是通$http服務非同步傳送與接收資料，沒有form表單個一樣可以。更何況，form表單的提交校驗在哪裡都可以搜尋得到，我這個是通過自己總結出來滴。 <!

英特爾發布至強可擴展處理器，業界十年來技術最大進步（核心思想：數據洪流出現）

strong 中心結合的人目的表示 png 高度最終集微網 7月12日報道今天，英特爾公司在北京正式發布了至強可擴展處理器。該處理器可為計算、網絡和存儲帶來針對工作負載優化的性能，向下一代雲基礎設施提供堅實基礎，並賦能數據分析、人工智能、高性能計算、網絡轉型等各

node.js初步了解（3）——慕課網（回調，作用域，上下文）

span clas global ava 運行 time log timeout color 1. 1 //回調:回調是異步編程最基本的方法，node.js需要按順序執行異步邏輯的時候，一般采用後續傳遞的方式，將後續邏輯封裝在回調函數中，作為起始函數的參數。 2 //

機器學習：PCA（實例：MNIST數據集）

還需要 bsp ase rom clas fit 疑問現象 arr 一、數據獲取數據 import numpy as np from sklearn.datasets import fetch_mldata mnist = fetch_mldata("MNIST

VS2010-MFC（對話框：字體對話框）

text 能夠 param truct 修改 lag 定義技術 dir 轉自：http://www.jizhuomi.com/software/175.html 字體對話框的作用是用來選擇字體。我們也經常能夠見到。MFC使用CFontDialog類封

《SQL入門經典》筆記（第一章：歡迎進入SQL世界）

想刷刷書，順便做個筆記~ 下列內容大部分都是直接抄書，侵刪 1. 什麼是ANSI SQL？ “美國國家標準化組織（ANSI）是一個核準多種行業標準的組織”。1987年，ISO吧ANSI SQL作為國標標準，目前最新的標準是SQL-2008。 2. SQL-2008:

The sum of gcd（莫隊：維護區間GCD和）

原題： http://acm.hdu.edu.cn/showproblem.php?pid=5381 題意： n陣列，q次詢問，每次詢問l，r，輸出l到r所有子區間的gcd和解析：首先是莫隊，排序了一下詢問。接下來的問題是維護詢問區間的問題。假設當前查詢的是l~r-1，需

華北五省機器人武術擂臺賽（無差別）（第二篇：從無到有的機械設計）

華北五省機器人武術擂臺賽（無差別）（第二篇：從無到有的機械設計） 1. 方案設計 2. 前期材料選型（建議） 3. 加工手段（建議參賽隊自備的裝置） 4. 機械設計 5. 結束語 1. 方案設計這裡借用東北大學ROBO

搜題摸魚系列（practice 4：正整數分解質因數）

抄題練習/背4 。。。題從網上搜的，給自己看的，侵刪 package practice; import java.util.Scanner; public class four4 { public static void main(String[] args) { int

SQL 語句效率問題（如何寫出高效能的SQL語句）

1.關於SQL查詢效率，100w資料，查詢只要1秒，與您分享: 機器情況 p4: 2.4 記憶體: 1 G os: windows 2003 資料庫: ms sql server 2000 目的: 查詢效能測試,比較兩種查詢的效能 SQL查詢效率 step by step

Django框架（十二：orm一對一的操作）

前面的部落格已經對資料庫的基礎知識有了介紹，對資料庫資料一對多的操作有了瞭解，現在來看看資料庫的一對一操作，非常簡單資料庫中建立兩張表，一個賬戶表，一個使用者表。一個賬戶對應一個使用者，即一對一關係， ORM資料庫的一對一關係：一個表中的一條資料對應著另外一個

牛客網——華為機試（題5：進位制轉換）（Java）

題目描述：寫出一個程式，接受一個十六進位制的數值字串，輸出該數值的十進位制字串。（多組同時輸入）輸入描述：輸入一個十六進位制的數值字串。輸出描述：輸出該數值的十進位制字串。示例1：輸入： 0xA 輸出： 10 import java.ut

JDK新特性------介面定義加強（普通方法：defult和static方法）

為什麼會有介面定義加強？因為介面中只有方法宣告沒有方法體，那麼就說明子類需要實現抽象方法，如果有很多子類實現的方法體相同，那麼就有很多相同的程式碼，但是在java中不建議出現相同程式碼，這時在JDK1.8之後，解決辦法是：介面中把相同方法實現。介面定義如何加

iview獲取全選和半選資料（方法一：基於樹型資料）

在用iview的時候發現iview的樹中獲取半選和全選的函式getCheckedAndIndeterminateNodes在我使用的iview版本里面是沒有提供的，於是自己寫了一下獲取全選和半選節點的資料 this.halfCheckData = [] checkData = this.$refs

tcp/ip詳解卷一（筆記3：tcp與相關協議）

相關文章： tcp/ip詳解卷一（筆記1：概述與IP層協議） tcp/ip詳解卷一（筆記2：UDP及相關的協議） tcp/ip詳解卷一（筆記3：tcp與相關協議）文章目錄 17 TCP:傳輸控制協議 17.1 tcp服務的可靠性 17.

LeetCode-126.單詞接龍II（相關話題：Dijkstra演算法+深度優先）

給定兩個單詞（beginWord 和 endWord）和一個字典 wordList，找出所有從 beginWord 到 endWord 的最短轉換序列。轉換需遵循如下規則：每次轉換隻能改變一個字母。轉換過程中的中間單詞必須是字典中的單詞。說明: 如果不存在這樣的轉換序列，返回一個

移動裝置瀏覽器視口問題（轉載原文：http://t.cn/zOZs0Tz）

移動瀏覽器的問題當我們將移動瀏覽器與桌面瀏覽器進行比較時，最明顯的區別是螢幕尺寸。移動瀏覽器顯示的桌面優化網站顯著少於桌面瀏覽器; 通過縮小直到文字不可讀的小，或者只顯示適合螢幕的網站的一小部分。移動螢幕遠小於桌面螢幕; 考慮最大寬度為400px，有時候要少得多。

微信小程式（三）：選座系統2（主要內容：陣列的動態更改）

人生無趣且不易，一起找點樂子吧。歡迎評論，和文章無關也沒問題。上篇文章我們主要說了列表的渲染，給定個數組，讓他根據我們的要求“畫”在介面上，最後我們也提到，如果想要想要改變介面，只要相應的改變對應陣列的內容就可以了。這次我們就來講怎樣從介面獲得資料，然後在

深究AngularJS——ng-checked（回寫：帶真實案例程式碼）

1.需求

2.新增頁面

3.詳情展示

相關推薦