AngularJS动态增进数据并删除的实例,class动态增减class样式的措施言传身教

整治文书档案,搜刮出多少个详解AngularJS
ng-class样式切换,稍微整理精简一下做下分享。

如下所示:

要兑现的成效相近下图,动态增加只怕去除div

本文实例讲述了AngularJS使用ng-class动态增减class样式的艺术。分享给我们供我们参谋,具体如下:

1、HTML

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
 <meta charset="UTF-8">
 <title>TodoList</title>
 <style>
  body {
   padding: 0;
   margin: 0;
  }
  .todo {
   width: 300px;
   margin: 100px auto;
  }
  .todo dd {
   overflow: hidden;
  }
  .todo input[type="checkbox"] {
   float: left;
  }
  .todo a {
   float: right;
  }
 </style>
</head>
<body>

 <div class="todo" ng-controller="TodoListController">
  <form ng-submit="addItem()">
   <label for="">添加事项</label>
   <input type="text" ng-model="todo">
  </form>
  <dl>
   <dt>待办事项</dt>
   <dd ng-repeat="todo in todos track by $index">
    <input type="checkbox" ng-checked="todo.checked" ng-click="done($index, $event)">
    {{todo.text}}
    <a ng-href="" ng-click=" rel="external nofollow" rel="external nofollow" delete($index, todos)">删除</a>
   </dd>
   <dt>已办事项{{doneTodos.length}}</dt>
   <dd ng-repeat="todo in doneTodos track by $index">
    <input type="checkbox" ng-checked="todo.checked" ng-click="undone($index, $event)">
    {{todo.text}}
    <a ng-href="" ng-click=" rel="external nofollow" rel="external nofollow" delete($index, doneTodos)">删除</a>
   </dd>
  </dl>
 </div>
 <script src="./libs/angular.min.js"></script>
 <script>
  // 定义一个模块
  var App = angular.module('App', []);
  // 定义一个控制器
  App.controller('TodoListController', ['$scope', function($scope) {

   // 待办事项
   $scope.todos = [];
   // 已完成事项
   $scope.doneTodos = [];
   // $scope.todo = '';
   // 回车时调用ng-submit,往待办事项中添加数据
   $scope.addItem = function () {
    // 向数组中添加数据
    $scope.todos.push({text:$scope.todo, checked: false});
    // 清空输入框
    $scope.todo = '';
   }
   // 勾选时完成
   $scope.done = function (index, ev) {
    // console.log(index);
    // console.log($scope.todos);
    // 从待办事项中删除
    var tmp = $scope.todos.splice(index, 1);
    tmp[0].checked = !tmp[0].checked;
    // 将删除的事项添加到已完成里
    $scope.doneTodos = $scope.doneTodos.concat(tmp);
    ev.preventDefault();
   }
   // 取消已完成
   $scope.undone = function (index, ev) {
    // 从已完成数据中删除
    var tmp = $scope.doneTodos.splice(index, 1);
    tmp[0].checked = !tmp[0].checked;
    // 将事项添加到待办事项中
    $scope.todos = $scope.todos.concat(tmp);
    // ev.preventDefault();
   }
   // 删除事项,传递当前索引和完整数据
   $scope.delete = function (index, todos) {
    // $scope.doneTodos.splice(index, 1);
    // console.log(todos);
    // 删除索引值对应的事项
    todos.splice(index, 1);
   }
  }])
  // var arr = [0, 1, 2, 3, 4];
  // arr.splice(2,1)
 </script>
</body>
</html>

AngularJS动态增进数据并删除的实例,class动态增减class样式的措施言传身教。点击 增添可增加一条div 点击删除可去除一条div

使用ng-class能够兑现动态地增减样式:

<ion-view> 
  <ion-content> 
    <div class="button-bar"> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst">First</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isSecond]" ng-click="isSecond = !isSecond">Second</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isThird]" ng-click="isThird = !isThird">Third</div> 
    </div> 
    <br><br> 
    <div class="button-bar"> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasAll]" ng-click="toggleAll()">All</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasFirst]" ng-click="toggleFirst()">First</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasSecond]" ng-click="toggleSecond()">Second</div> 
      <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[hasThird]" ng-click="toggleThird()">Third</div> 
    </div> 
  </ion-content> 
</ion-view> 
<style> 
  .bgstyle {background-color: #8f8f8f;width: 100%;height: 20px;margin: 2px 0 2px 0;text-align: center;} 
  .bgstyle-check {background-color: #ff3b30;width: 100%;height: 20px;margin: 2px 0 2px 0;text-align: center;} 
</style> 

如上那篇AngularJS动态增加数据并剔除的实例正是作者分享给大家的全体内容了,希望能给大家一个参照,也盼望我们多多援助脚本之家。

皇家赌场手机版 1

<!DOCTYPE html>
<html ng-app="formExample">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../js/angular.js"></script>
  <script>
    angular.module('formExample', [])
        .controller('FormController', ['$scope', function($scope)
        {
        }]);
  </script>
  <style>
    .strike {
      text-decoration: line-through;
    }
    .bold {
      font-weight: bold;
    }
    .red {
      color: red;
    }
  </style>
</head>
<body>
<div>
  <p ng-class="{strike: deleted, bold: important, red: error}">通过映射的方式</p>
  <input type="checkbox" ng-model="deleted">添加strike样式<br>
  <input type="checkbox" ng-model="important">添加bold样式<br>
  <input type="checkbox" ng-model="error">添加错误样式
  <hr>
  <p ng-class="style">使用字符串的方式</p>
  <input type="text" ng-model="style" placeholder="输入 bold、 strike 或 red">
  <hr>
  <p ng-class="[style1, style2, style3]">使用数组的方式</p>
  <input ng-model="style1" placeholder="输入: bold, strike 或 red"><br>
  <input ng-model="style2" placeholder="输入: bold, strike 或 red"><br>
  <input ng-model="style3" placeholder="输入: bold, strike 或 red"><br>
  <hr/>
</div>
</body>
</html>

2、controller

你恐怕感兴趣的篇章:

  • AngularJS使用ng-class动态增减class样式的主意言传身教
  • 详解AngularJS
    ng-class样式切换
  • AngularJS表格样式简单设置方法言传身教
  • AngularJs定制样式插入到ueditor中的难点总计
  • 皇家赌场手机版,Angular
    4中什么展示内容的CSS样式示例代码
  • Angular5给组件自个儿的标签增添样式class的主意
  • Angular使用动态加载组件方法完结Dialog的演示
  • angularJS实现动态拉长,删除div方法
  • AngularJS动态增进数据并删除的实例,class动态增减class样式的措施言传身教。AngularJS完成动态切换样式的方法深入分析

HTML代码如下:(省略CSS样式代码了哈哈大笑)

越多关于AngularJS相关内容感兴趣的读者可查看本站专项论题:《AngularJS指令操作技巧总计》、《AngularJS入门与进级教程》及《AngularJS
MVC架构总括》

appControllers.controller('TestlCtrl', function ($scope, $state) { 
  $scope.isFirst = false; 
  $scope.isSecond = false; 
  $scope.isThird = false; 


  $scope.hasAll = false; 
  $scope.hasFirst = false; 
  $scope.hasSecond = false; 
  $scope.hasThird = false; 

  $scope.toggleAll = function () { 
    $scope.hasAll = !$scope.hasAll; 
    console.log($scope.hasAll); 
    var dynamicValue = $scope.hasAll; 
    $scope.hasFirst = dynamicValue; 
    $scope.hasSecond = dynamicValue; 
    $scope.hasThird = dynamicValue; 
  } 

  $scope.toggleFirst = function () { 
    $scope.hasFirst = !$scope.hasFirst; 
    checkAll(); 
  } 

  $scope.toggleSecond = function () { 
    $scope.hasSecond = !$scope.hasSecond; 
    checkAll(); 
  } 

  $scope.toggleThird = function () { 
    $scope.hasThird = !$scope.hasThird; 
    checkAll(); 
  } 

  function checkAll() { 
    if ($scope.hasFirst == true && $scope.hasSecond == true && $scope.hasThird == true) { 
      console.log("123ok"); 
      $scope.hasAll = true; 
    } else { 
      console.log("123no"); 
      $scope.hasAll = false; 
    } 

  } 
}) 
<div class="accordion-inner">
  <div class="alert alert-info fade in" ng-repeat="permission in permissions">授权给:
    <select id="" class="grantees" disabled="" style=" margin-bottom: 3px;" ng-model="permission.grantee">
      <option value="everyone">所有人</option>
      <option value="authenUsers">已认证的用户</option>
      <option value="me" selected="">我自己</option>
    </select>
    <input type="checkbox" checked="" class="permissions" disabled="" ng-model="permission.port1">Open/Download
    <input type="checkbox" checked="" class="permissions" disabled="" ng-model="permission.port2">View Permissions
    <input type="checkbox" checked="" class="permissions" disabled="" ng-model="permission.port3">Edit Permissions
    <button class="btn" type="button" style="float: right;" ng-click="delPermission($index)">删除</button>
  </div>
  <div>
    <button class="btn" type="button" ng-click="addPermission($index)">增加访问许可</button>
  </div>
  <br>
  <div>
    <button class="btn btn-primary" type="button">保存</button>
    <button class="btn" type="button">取消</button>
  </div>
</div>

可望本文所述对大家AngularJS程序设计有所帮忙。

3、效果图

增加和删除的JS代码分别如下:

你或然感兴趣的稿子:

  • 详解AngularJS
    ng-class样式切换
  • AngularJS表格样式简单设置方法言传身教
  • AngularJs定制样式插入到ueditor中的难题计算
  • Angular
    4中怎么着体现内容的CSS样式示例代码
  • Angular5给组件自个儿的竹签增多样式class的格局
  • Angular使用动态加载组件方法达成Dialog的言传身教
  • angularJS实现动态增进,删除div方法
  • AngularJS动态增进数据并剔除的实例
  • AngularJS落成动态切换样式的不二等秘书诀深入分析

皇家赌场手机版 2

//增加许可访问div
$scope.permissions = [{grantee: "",port1:"",port2:"",port3:""}];
$scope.addPermission = function($index){
  $scope.permissions.splice($index + 1, 0,
    {grantee:"", port1:"",port2:"",port3:""});
}
//删除许可访问div
$scope.delPermission = function($index){
  $scope.permissions.splice($index, 1);
}

4、循环列表,决断索引加多样式

以上那篇angularJS实现动态增加,删除div方法正是笔者分享给我们的全体内容了,希望能给大家一个参照他事他说加以考察,也指望大家多多援助脚本之家。

<div class="category-tab "> 
  <ul> 
    <li ng-repeat="item in rootList" ng-class="{true: 'cur', false: ''}[$index+1===1]"> 
      <a href="">{{item.CategoryName}}</a> 
    </li> 
    <li><a href="">热门推荐</a></li> 
    <li><a href="">热门推荐</a> </li> 
  </ul> 
</div> 

你恐怕感兴趣的小说:

  • AngularJS使用ng-class动态增减class样式的法子言传身教
  • 详解AngularJS
    ng-class样式切换
  • AngularJS表格样式简单设置方法言传身教
  • AngularJs定制样式插入到ueditor中的难点总括
  • Angular
    4中如何展现内容的CSS样式示例代码
  • Angular5给组件本人的竹签增多样式class的法子
  • Angular使用动态加载组件方法完结Dialog的身体力行
  • AngularJS动态增进数据并剔除的实例
  • AngularJS实现动态切换样式的艺术深入分析

*、

<ion-item class="item-divider"> 
  <i ng-class="{true: 'icon ion-tips mr10', false: 'iconfont icon-shangdian text-orange mr10'}[item.VendorId==0]"> 
    <element ng-show="item.VendorId==0">合作</element></i>{{item.VendorName}} 
</ion-item> 

以上就是本文的全体内容,希望对大家的学习抱有扶助,也愿意大家多多援助脚本之家。

您恐怕感兴趣的稿子:

  • AngularJS使用ng-class动态增减class样式的措施言传身教
  • AngularJS表格样式简单设置方法言传身教
  • AngularJs定制样式插入到ueditor中的难点总括
  • Angular
    4中怎样展示内容的CSS样式示例代码
  • Angular5给组件本人的竹签增加样式class的措施
  • Angular使用动态加载组件方法达成Dialog的示范
  • angularJS完成动态拉长,删除div方法
  • AngularJS动态增加数据并剔除的实例
  • AngularJS实现动态切换样式的诀窍解析

Leave a Comment.