如何在范围值更改时使用 angularJs 更新 UI
How to update UI using angularJs when scope value changes?
$scope.setMonth = function(month){
$scope.month = month;
alert($scope.month);
$scope.getMonthData();
};
$scope.getMonthData = function(month){
// getting data for all schedules which a user can book
$http.get('http://localhost/cakephp/Schedules/allSchedulesWithoutConflict').success(function(data) {
$scope.allSchedules = data;
var array1 = [];
var date = 1;
$scope.array2 = [];
angular.forEach($scope.allSchedules, function(item){
array1 = item.Schedule.start_time.split('-');
date = array1[1];
console.log(date);
if(date == $scope.month){
$scope.array2.push(item);
}
})
console.log($scope.array2);
});
};
这是我的 angularJs 代码，这里发生的事情是这个 setMonth(( 函数从 html 中调用以更改 $scope.month 值，并且通过使用这个月份值，我在 getMonthData(( 函数中过滤数据，该函数会更改 array2 值，我希望这种值的变化反映在 UI 上
这是我的 html 代码：
`<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" rel="stylesheet">
<!-- <script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.js"></script>
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular-sanitize.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>-->
<title>Book My Class</title>
<?php
// echo $this->Html->css('select.min');
// echo $this->Html->css('fullcalendar.print');
// echo $this->Html->css('fullcalendar');
// echo $this->Html->css('tableheader');
// echo $this->Html->css('pendingFeeButton');
echo $this->Html->css('table');
echo $this->Html->css('bootstrap.min');
// echo $this->Html->css('font-awesome.min');
echo $this->Html->script('/libraries/moment.js');
// echo $this->Html->script('/app/jquery.min.js');
echo $this->Html->script('/libraries/jquery-1.11.0.min.js');
echo $this->Html->script('/libraries/angular.js');
echo $this->Html->script('/libraries/angular-sanitize.js');
echo $this->Html->script('/libraries/angular-ui-router.min.js');
echo $this->Html->script('/libraries/ui-bootstrap-tpls.js');
echo $this->Html->script('/libraries/lodash.min.js');
// echo $this->Html->script('/app/app.js');
// echo $this->Html->script('/utils/select.js');
// echo $this->Html->script('/app/schedule.js');
// echo $this->Html->script('/app/module.js');
// echo $this->Html->script('/app/venue.js');
// echo $this->Html->script('/app/user.js');
// echo $this->Html->script('/app/holiday.js');
// echo $this->Html->script('/app/autoschedule.js');
// echo $this->Html->script('/app/modulecycle.js');
// echo $this->Html->script('/app/moment.min.js');
// echo $this->Html->script('/app/fullcalendar.min.js');
// echo $this->Html->script('/app/pendingfee.js');
echo $this->Html->script('/StudentView/table.js');
// echo $this->Html->script('/StudentView/classData.js');
// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js');
// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js');
// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js');
// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-message.js');
// echo $this->Html->script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-material.js');
// echo $this->Html->script('https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js');
?>
</head>
<body ng-app= 'myapp'>
<div class="page-container">
<!-- top navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".sidebar-nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h class="pull-left"><b>Alchemist Scheduler</b></h>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse"><a href="/cakephp-2.8.2/users/logout" ng-click="logout" class="navbar-link navbar-right">LOGOUT</a>
</div>
</div>
</div>
<div class="container" style="margin-top:40px">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<ul class="nav">
<li class="active"><a href="#">Dash Board</a></li>
<li><a href="#">Book Classes</a></li>
<li><a href="#">Attendance</a></li>
<li><a href="#">Mentor</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>
<div ng-controller="twoWeekClassCtrl">
<div ng-repeat="data in classData track by $index">
<div class="col-md-2">
<div class="panel panel-default" >
<div class="panel-heading">{{data.Schedule.start_time}}</div>
<div class="panel-body">
<ul>
<li>{{data.Schedule.name}}</li>
<li ng-if='data.C[0].faculty_name = null'>{{data.C[0].faculty_name}}</li>
<li ng-if='data.C[0].venue != null'>{{data.C[0].venue}}</li>
</ul>
<div ng-if="data.C" ng-repeat="class in data.C" style="display : inline" >
<i ng-if='data.Attendance[$index].is_present == false'class="fa fa-circle" aria-hidden="true" style='color:red'></i>
<i ng-if='data.Attendance[$index].is_present == true'class="fa fa-circle" aria-hidden="true" style='color:green'></i>
<i ng-if='data.Attendance[$index].is_present == null'class="fa fa-circle-o" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</div><!--/.page-container-->
<div class="text-center" ng-controller = 'twoWeekClassCtrl'>
<ul class = "pagination pagination-lg">
<li><a href = "#" ng-click= "">«</a></li>
<li><a href = "#" ng-click="getMonthData(01)">January</a></li>
<li><a href = "#" ng-click="getMonthData(02)">February</a></li>
<li><a href = "#" ng-click="getMonthData(03)">March</a></li>
<li><a href = "#" ng-click="getMonthData(04)">April</a></li>
<li><a href = "#" ng-click="getMonthData(05)">May</a></li>
<li><a href = "#" ng-click="getMonthData(06)">June</a></li>
<li><a href = "#" ng-click="getMonthData(07)">July</a></li>
<li><a href = "#" ng-click="getMonthData(08)">August</a></li>
<li><a href = "#" ng-click="getMonthData(09)">September</a></li>
<li><a href = "#" ng-click="getMonthData(10)">Ocober</a></li>
<li><a href = "#" ng-click="getMonthData(11)">November</a></li>
<li><a href = "#" ng-click="getMonthData(12)">December</a></li>
<li><a href = "#" ng-click="" >»</a></li>
</ul>
</div>
<table class="table table-striped" ng-controller = 'twoWeekClassCtrl'>
<thead>
<tr>
<th> <a href="#" ng-click="sortType = 'Schedule.name'">
Module
<span ng-show="sortType == 'Schedule.name'" class="fa fa-caret-down"></span>
</a></th>
<th><a href="#" ng-click="sortType = 'Schedule.reg_start_date'">
Start Date
<span ng-show="sortType == 'Schedule.reg_start_date'" class="fa fa-caret-down"></span>
</a></th>
<th>Reg Ends</th>
<th> <a href="#" ng-click="sortType = 'name'">
Venue
<span ng-show="sortType == 'name'" class="fa fa-caret-down"></span>
</a></th>
<th> <a href="#" ng-click="sortType = 'name'">
Faculty
<span ng-show="sortType == 'name'" class="fa fa-caret-down"></span>
</a></th>
<th> <a href="#" ng-click="sortType = 'name'">
Book
<span ng-show="sortType == 'name'" class="fa fa-caret-down"></span>
</a></th>
</tr>
</thead>
<tbody >
<tr ng-repeat="data in array2 | orderBy:sortType:sortReverse" >
<td class="filterable-cell">{{data.Schedule.name}} {{data.Schedule.start_time}}</td>
<td class="filterable-cell">{{data.Schedule.reg_start_date}}</td>
<td class="filterable-cell">{{data.Schedule.reg_end_date}}</td>
<td class="filterable-cell">{{data.C[0].faculty_name}}</td>
<td class="filterable-cell">{{data.C[0].venue}}</td>
<td class="filterable-cell"> <button ng-if="data.Schedule.purpose == 'book'" type="button" ng-click="book(data.Schedule.id);row.selected=!row.selected" class="pull-right btn btn-xs">
<span ng-class=""></span>
{{row.selected?'Cancel':'Book'}}
</button>
<button ng-if="data.Schedule.purpose == 'cancel'" type="button" ng-click="book(data.Schedule.id);row.selected=!row.selected" class="pull-right btn btn-xs">
<span ng-class=""></span>
{{row.selected?'Book':'Cancel'}}
</button>
</td>
</tr>
</tbody>
</div>
</div>
</body>
</html>控制台.log(jsonStringify(array2((的输出：
[{"Schedule"：{"id"："574"，"created"："2015-11-17 22：00：35"，"modified"："2015-11-17 22：01：45"，"reg_start_date"："2015-11-17"，"reg_end_date"："2015-12-17"，"start_time"："2015-12-20 09：00：00"，"end_time"："2016-01-10 11：00：00"，"reg_type_id"："1"，"schedule_state_id"："4"，"error_count"："0"，"is_forced"：空，"容量"："25"，"default_backup_day"：空，"default_backup_time"：空，"filter_reg"：空，"c_count"："4"，"min_batch"："15"，"module_id"："9"，"名称"："DI-逻辑推理"，"描述"："，"reg_start_days"："33"，"reg_end_days"："3"，"指令"："，"draft_count"："0"，"cancel_count"："0"，"auto_schedule_id"：null，"registration_count"："16"，"目的"："书"}，"C"：
当范围更改为更新视图时，尝试在范围更新后添加JS：
$scope.$apply();
如果您看到$digest已经在进行中，则表示您的范围已经在刷新中。无需调用 $apply 函数。
尝试在$timeout内调用范围修改(不要忘记将其导入控制器(它将执行"安全"范围修改
$timeout(function() {
// run your scope modification
})
您在模板中多次使用ng-controller。当模板加载并且角度找到ng-controller时，控制器twoWeekClassCtrl再次加载，每个ng-controller都有一个新$scope。因此，创建了三个$scope，每个都彼此不同。而且，这就是您的视图没有更新的原因。
要解决此问题，您需要使用一个 ng-controller .将该ng-controller放在 body 标记之后的模板中，以便twoWeekClassCtrl加载一次，并且只创建一个范围。喜欢这个：
<body ng-app= 'myapp'>
<div class="page-container" ng-controller="twoWeekClassCtrl">
...
...
...
</div>
</body>
从所有其他三个div中删除ng控制器。
相关文章：
- 如何在范围值更改时使用 angularJs 更新 UI
- 使用AngularJS更新cookie
- AngularJS更新控制器变量并再次渲染视图
- Angularjs 更新 setTimeout 中的范围变量不起作用
- 无法使用AngularJS更新变量
- 使用AngularJS更新下拉列表
- AngularJs 更新引导进度条
- AngularJS:更新资源的正确方法是什么
- AngularJS更新$scope变量并输出到pre
- 如何使用AngularJS更新/编辑数据库中的数据
- AngularJS更新ng-model的值以设置默认值
- AngularJs:更新事件$scope
- 使用 AngularJS 更新服务器
- 使用 AngularJS 更新表中的值的最佳实践
- Angularjs - 更新同一控制器的多个实例
- AngularJS更新范围$q
- angularJS更新第二数组值的数组基
- 尝试使用Firebase facebookconnect和AngularJS更新范围变量时出现问题
- 点击AngularJS更新Firebase中的字段
- 使用AngularJS更新Youtube上的400个错误请求
