如何在范围值更改时使用angularJs更新UI？

时间：2016-05-14 18:25:39

标签： javascript jquery angularjs 

$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代码：

＆＃13;
＆＃13; 
`<!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= "">&laquo;</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="" >&raquo;</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>
＆＃13;
＆＃13;
＆＃13;

console.log的输出（jsonStringify（array2）：

[{＆＃34;附表＆＃34; {＆＃34; ID＆＃34;：＆＃34; 574＆＃34;＆＃34;创建＆＃34;：＆＃34; 2015-11- 17 22：00：35＆＃34;，＆＃34;修改＆＃34;：＆＃34; 2015-11-17 22：01：45＆＃34;，＆＃34; reg_start_date＆＃34;：＆＃34; 2015-11-17＆＃34;，＆＃34; reg_end_date＆＃34;：＆＃34; 2015-12-17＆＃34;，＆＃34; start_time＆＃34;：＆＃34; 2015-12-20 09 ：00：00＆＃34;，＆＃34; end_time＆＃34;：＆＃34; 2016-01-10 11：00：00＆＃34;，＆＃34; reg_type_id＆＃34;：＆＃34; 1＆＃ 34;，＆＃34; schedule_state_id＆＃34;：＆＃34; 4＆＃34;＆＃34; ERROR_COUNT＆＃34;：＆＃34; 0＆＃34;＆＃34; is_forced＆＃34;：空， ＆＃34;能力＆＃34;：＆＃34; 25＆＃34;＆＃34; default_backup_day＆＃34;：空，＆＃34; default_backup_time＆＃34;：空，＆＃34; filter_reg＆＃34;：空＆＃34; c_count＆＃34;：＆＃34; 4＆＃34;＆＃34; min_batch＆＃34;：＆＃34; 15＆＃34;＆＃34;模块id＆＃34;：＆＃34; 9＆＃34;，＆＃34; name＆＃34;：＆＃34; DI-Logical Reasoning＆＃34;，＆＃34; description＆＃34;：＆＃34;＆＃34;，＆＃34; reg_start_days＆＃ 34;：＆＃34; 33＆＃34;＆＃34; reg_end_days＆＃34;：＆＃34; 3＆＃34;＆＃34;指令＆＃34;：＆＃34;＆＃34;＆＃ 34; draft_count＆＃34;：＆＃34; 0＆＃34;＆＃34; cancel_count＆＃34;：＆＃34; 0＆＃34;＆＃34; auto_schedule_id＆＃34;：空，＆＃34; registration_c 'mount＆＃34;：＆＃34; 16＆＃34;＆＃34;目的＆＃34;：＆＃34;书＆＃34;}＆＃34; C＆＃34;：

2 个答案:

答案 0 :(得分：2)

当范围更改为更新视图时，尝试在更新范围后添加js：

8<...q.v..j......[...{v.%.......z........connect.?..........app...edge/..flashVer...MAC 21,0,0,216..swfUrl..>http://offsidestreams.com/js/jwplayer-7.3.6/jwplayer.flas.h.swf..tcUrl.. rtmp://62.210.102.219:1935/edge/..fpad....capabilities.@m........audioCodecs.@.........videoCodecs.@o.......
vide.oFunction.?.........pageUrl..@http://offsidestreams.com/live-streams/sky-sports-f1-hd.564.html..objectEncoding...........  .............&%..............&%..................................................._result.?..........fmsVer...FMS/3,5,7,7009..capabilities.@?........mode.?.........    ...level...status..code...NetConnection.Connect.Success..description...Connection succeeded...data.......version..
3,5,7,7009..    ..clientid.A.N.!.....objectEncoding...........  ..@..........&%....N...........createStream.@........B.....
.........................._result.@.........?..........O...........play............z2587?token=9b305a0d45ef22fd34d6f5afee8cbe6f&bid=1&pid=2&uid=71356&did=d5e89cbe306f1381072e40a9b25f9495&g=1&g............m=1&platform=1.................................onStatus.............level...status..code...NetStream.Play.Reset..description...Playing and resetting 2587...clientid.A.N.!..... ...............onStatus.............level...status..code...NetStream.Play.Start..description...Started playing 2587...clientid.A.N.!....
isFastPlay....timecodeOffset..  70618282L.. E..........|RtmpSampleAccess..........,........onStatus...code...NetStream.Data.Start.. ............. ....E.........
onMetaData...duration...........width.@.........height.@........
videodatarate.......... framerate.@9........videocodecid.@........
audiodatarate.@_@.......audiosamplerate.@.........audiosamplesize.@0........stereo....audiocodecid.@$........Server...NGINX RTMP (github.com/arut/nginx-rtmp-module)..displayWidth...1280.
displayHeight...720..fps...25..profile.....level.....encoder..
Lavf57.21.101..filesize...........  ......*

如果你看到$ digest正在进行中，那就说你的范围已经在刷新了。您不需要调用$ apply函数。

尝试在$ timeout内调用范围修改（不要忘记在控制器中导入它）它会做一个＆＃34; safe＆＃34;范围修改

$scope.$apply();

答案 1 :(得分：1)

您在模板中多次使用ng-controller。当模板加载并且角度找到ng-controller时，控制器twoWeekClassCtrl会再次为每个$scope加载一个新的ng-controller。因此，创建了三个$scope，每个ng-controller都与另一个不同。而且，这就是为什么您的观点没有得到更新的原因。

要解决此问题，您需要使用一个ng-controller。将twoWeekClassCtrl放在body标签后面的模板上，以便<body ng-app= 'myapp'> <div class="page-container" ng-controller="twoWeekClassCtrl"> ... ... ... </div> </body> 加载一次，只创建一个范围。像这样：

tblAlbum
------------------------
AlbumID    Int
Name  nvarchar(255)

tblPhotos
-------------------------
PhotoID          int
FileName        nvarchar(255)

tblAlbumPhotos
------------------------
AlbumPhotoID (P)    int
AlbumID             int
PhotoID             int

从所有其他三个div中删除ng-controller。

相关问题
最新问题