zoukankan      html  css  js  c++  java
  • Checklist-model

     [checkbox写在js里]

    Array of objects (pick id) 

    html

    <label ng-repeat="role in roles">
      <input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
    </label>

    js

    var app = angular.module("app", ["checklist-model"]);
    app.controller('Ctrl2', function($scope) {
      $scope.roles = [
        {id: 1, text: 'guest'},
        {id: 2, text: 'user'},
        {id: 3, text: 'customer'},
        {id: 4, text: 'admin'}
      ];
      $scope.user = {
        roles: [2, 4]
      };
      $scope.checkAll = function() {
        $scope.user.roles = $scope.roles.map(function(item) { return item.id; });
      };
      $scope.uncheckAll = function() {
        $scope.user.roles = [];
      };
      $scope.checkFirst = function() {
        $scope.user.roles.splice(0, $scope.user.roles.length); 
        $scope.user.roles.push(1);
      };
    });

    原文阅读在这儿呢^_^

     [checkbox写在html里]

    html

    <label><input type="checkbox" checklist-model="user.roles" value="a"> Administrator</label>
    <label><input type="checkbox" checklist-model="user.roles" value="c"> Customer</label>
    <label><input type="checkbox" checklist-model="user.roles" value="g"> Guest</label>
    <label><input type="checkbox" checklist-model="user.roles" value="u"> User</label>

    js

    var app = angular.module("app", ["checklist-model"]);
    app.controller('Ctrl4a', function($scope) {
      $scope.roles = {
        a: 'Administrator',
        c: 'Customer',
        g: 'Guest',
        u: 'User'
      };
      $scope.user = {
        roles: ['c']
      };
      $scope.checkAll = function() {
        $scope.user.roles = Object.keys($scope.roles);
      };
      $scope.uncheckAll = function() {
        $scope.user.roles = [];
      };
      $scope.checkFirst = function() {
        $scope.user.roles.splice(0, $scope.user.roles.length); 
        $scope.user.roles.push('a');
      };
    });
  • 相关阅读:
    用学习逃避成长,听新知缓解焦虑
    谈谈“人”和“技能”
    SpringMVC的工作原理
    Spring MVC 处理静态资源文件
    nrpe的安装设置
    Maatkit工具使用&lt;一&gt;之mysql主从数据校验工具
    phpcgi占用cpu100%的一次排障之旅
    nginx支持cgi
    如何查看服务器RAID卡信息的SHELL脚本和命令介绍
    Mysql的一次经典故障
  • 原文地址:https://www.cnblogs.com/miny-simp/p/7136202.html
Copyright © 2011-2022 走看看