AngularJS 1.x学习

一. $http

AngularJS $http 是一个用于读取web服务器上数据的服务。$http.get(url) 是用于读取服务器数据的函数。


<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
    .success(function(response) {$scope.names = response.records;});
});
</script>

二.模块

模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。

通过 AngularJS 的 angular.module 函数来创建模块:

<script>

var app = angular.module("myApp", []); 

</script>

三.动画

AngularJS 提供了动画效果,可以配合 CSS 使用。AngularJS 使用动画需要引入 angular-animate.min.js

展开阅读全文

angularjs1.x修改如何获取checkbox选中的那条数据以弹窗展现?初学请多多指教

09-11
``` <div ng-controller="checkController"> <div class="list-operation"> <p> <button type="button" class="btn btn-info btn-sm" ng-click="Modify()"><span class="glyphicon glyphicon-edit"></span>修改</button> <button type="button" class="btn btn-danger btn-sm" ng-click="batchIds()"><span class="glyphicon glyphicon-floppy-remove"></span>删除</button> </p> </div> <table class="table table-bordered"> <thead> <tr> <th width="3%"><input type="checkbox" ng-model="selectAll" ng-checked="select" ng-click="changeAll()"></th> <th>名称</th> <th>电话</th> <th>是否</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td><input type="checkbox" ng-checked="selectAll" ng-click="funcChange()" ng-model="user.isSelected"/></td> <td>{{user.username}}</td> <td>{{user.tel}}</td> <td>{{user.Shuttle}}</td> </tr> </tbody> </table> </div> <div class="modal fade" id="Modify" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static"> <div class="modal-dialog" style="width:800px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">修改</h4> </div> <div class="modal-body"> <input type="text" value="名称"/> <input type="text" value="电话"/> <input type="text" value="是否"/> </div> </div> </div> </div> JS: myApp.controller('checkController', function($scope,$http,$location) { $http.get('lib/data/data.json').success(function(response) { var arr = []; var data = response.data; for(var i=0;i<data.length;i++){ } data.forEach(function(val,index){ var arrdata = val; arrdata.Shuttle = arrdata.Shuttle =='1'?'是':'否'; arr.push(arrdata) }) $scope.users = arr }) //修改 $scope.Modify=function(){ $('#Modify').modal('show'); } $scope.selectAll=false;//全选默认为false //全选按钮check的点击事件 $scope.changeAll = function(){//全选/取消全选 angular.forEach($scope.users,function(v,k){ v.isSelected = $scope.selectAll; }) }; //单个数据的check事件 $scope.funcChange = function(){// 当所有都选中时 $scope.select = true; angular.forEach($scope.users,function(v,k){ $scope.select = $scope.select && v.isSelected; }); }; }); ```
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值