个人中心
gpt4 book ai didi

javascript - 当范围值发生变化时，如何使用 angularJs 更新 UI？

转载 作者：行者123 更新时间：2023-11-28 13:16:46 26 4
gpt4 key购买 nike 

$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 代码，这里发生的是从 html 调用这个 setMonth() 函数来更改 $scope.month 值，并通过使用这个月份值，我正在过滤 getMonthData() 函数中的数据它改变了 array2 值，我希望这个值的改变能够反射(reflect)在 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= "">&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>

console.log 的输出(jsonStringify(array2):

[{"日程":{"id":"574","创建":"2015-11-17 22:00:35","修改":"2015-11-17 22:01:45 ","re​​g_start_date":"2015-11-17","re​​g_end_date":"2015-12-17","start_time":"2015-12-20 09:00:00","end_time":"2016- 01-10 11:00:00","re​​g_type_id":"1","schedule_state_id":"4","error_count":"0","is_forced":null,"capacity":"25","default_backup_day ":null,"default_backup_time":null,"filter_reg":null,"c_count":"4","min_batch":"15","module_id":"9","name":"DI-逻辑推理","描述":"","re​​g_start_days":"33","re​​g_end_days":"3","说明":"","draft_count":"0","cancel_count":"0","auto_schedule_id":null，“registration_count”:“16”，“目的”:“书”}，“C”:

最佳答案

当范围更改以更新 View 时，请尝试在更新范围后添加 js:

$scope.$apply();

如果您看到 $digest 已在进行中，则表示您的作用域已在刷新。您不需要调用 $apply 函数。

尝试在 $timeout 内调用您的范围修改(不要忘记将其导入到您的 Controller 中)，它将执行“安全”范围修改

$timeout(function() {
  // run your scope modification
})

关于javascript - 当范围值发生变化时，如何使用 angularJs 更新 UI？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37230364/

26 4 0
文章推荐： jquery - 无法使 JQgrid 4.5.2 卡住列正常工作——只有标题在移动
文章推荐： javascript - ReactJS:为什么我的 div 没有出现？
文章推荐： javascript - 如何将jquery代码转换为函数？
文章推荐： javascript - 如何替换 JavaScript 字符串中除字母和数字之外的所有内容(空格/符号)？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com