1. 程式人生 > >Angularjs Ng_repeat中實現複選框選中並顯示不同的樣式

Angularjs Ng_repeat中實現複選框選中並顯示不同的樣式

頁面程式碼:

<!-- 彈出層 -->
<section class="popup-bg" ng-if="IsActive">
    <div class="popup-box phone-detail">
        <div class="popup-title popup-detail-title">通訊錄
            <i class="iconfont popup-close-font rights " ng-click="HideMail()">&#xe61c;</i>
        </
div> <div class="content"> <div class="phone" ng-repeat="User in NoticeUserList">{{User.Name}} <div class="check-item rights"> <div class="check-bg" ng-class="{true:'checkeds',false:'uncheckeds',}[active]"> </
div> <input type="checkbox" ng-model="active" class="checkboxs" value="User.Name" ng-click="itemSelected($event,User.Id,active)"> </div> </div> </div> </div> </section> Controller中程式碼:
$scope.itemIds = [];
$scope.active = false; $scope.itemSelected = function ($event, pid, active) { var checkbox = $event.target; if (checkbox.checked) { $scope.itemIds.push(pid); } else { $scope.itemIds = Tools.arrRemove($scope.itemIds, pid); } console.log(active); console.log($scope.itemIds); }; 總結: 此處開始寫的時候沒有使用NG-MODEL,導致複選框選中一個,其他的複選框樣式都跟著變化了,重點就是加上NG-MODEL,並且和NG-CLASS設定的[]中的名稱一致即可。


相關推薦

Angularjs Ng_repeat實現選中顯示不同樣式

頁面程式碼: <!-- 彈出層 --> <section class="popup-bg" ng-if="IsActive"> <div class="popu

如何在點事件取得選中的單元格值

var products = [];    var ordernums = [];    var ordernums1 = [];    var $span = $('.fr-checkbox-checkon');  //獲取選中的複選框  var $tds = $("td"

VueCheckBox實現效果

為什麼有radio不用,偏偏要使用CheckBox實現單選效果呢? 答案是如果想同時實現單選,又實現可以一個都不選的話。只能使用CheckBox來做了。   通過jQuery來做 實現思路: 1.如果當前物件不選中:去除當前物件的選中狀態 2.如果當前物件選中:

JS(checkbox) 選中,按鈕(button)可用,否則按鈕不可用

<body> <input type="checkbox" id="checkbox" onclick="check()"/>同意協議 <br /> <input type="button" id="button" value

下拉可以實現

(1)要實現的介面形式如下: 下面是jsp頁面中的寫法: <!-- 下面是下拉框中含有複選框。要是能夠傳值,必須重寫easyui——combox,用js新增複選框--> <tr> <td

jquery獲取input輸入的值、radio單選中的值、checkbox選中的值

1)jquery獲取input輸入框中的值 如何用jquery獲取<input id="test" name="test" type="text"/>中輸入的值? $(" #test ").val() $(" input[ name='test' ] ").va

angularjscheckbox

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js

選中 獲取後面文字 顯示在div 取消選中 則不顯示

 <div class="am-form-group"  style="height: auto; width: 30%;">                                         <label for="user-phone"

怎麼把PHP選中的多個值寫入到資料庫

今天提交表單數到據庫時,CheckBox選中的值不能夠全部提交,浪費了很長時間,最後解決方法如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ

jq實現聯級選中和取消動作

圖例如下: <script> //獲取當前的複選框 $('input[name=pri_id_list[]]').click(function(){

HTMLcheckbox復選中及沒選中值的生成

BE 功能 分享 com gpo span 標簽 size strong 只需在input標簽中加入 onclick="this.value=(this.value==0)?1:0" <input type="checkbox" name="rememberMe"

jQuery實現

這裡職務只能勾選一個,所以我打算實現複選框只能單選的功能。 實現思路: 遍歷每一個checkbox,如果有一個選中,其他的就預設未選中狀態,從而實現checkbox單選功能。 js程式碼: //checkbox實現單選 $("input[name='job']:checkb

【JS】用checked實現和全不

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>無標題文件</title>

js實現的全 取消全

html虛擬碼 <table> <tr> <td><input type="checkbox" name="all" id="checkall" onclick="checkAll()" /></td>

js實現的多,全,反

多選,全選,反選 js實現複選框的多選,全選,反選 js實現複選框的多選,全選,反選 <table> <thead> <tr> <th><input type="checkbox"

js實現/全不/反

js實現複選框全選/全不選/反選 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

JQuery 實現功能

  HTML部分 <body> <input type="checkbox" name="fu">全選(父)<br> <input type="checkbox" name="zi">子1<br> <input ty

多個選中事件 選中更改父層class樣式

html <ul class="grid"> <li class="item"> <input type="checkbox" name="check"/> <li cl

如何在sql查詢引用提示頁面引數

新做了一張報表,由於模型裡面沒有,所以必須用sql寫,在這裡碰到一個瓶頸: sql裡面要引用到提示頁面的一個引數,這個引數是複選框引數: 查詢裡面的sql是這樣寫的: 其中畫橫線的部分#prompt(‘year’,‘CHAR(4)’)#是年引數,在提示頁面中是單選值提示

ztree選中事件

            callback: {                 //樹複選框選中事件