Как обновить пользовательский интерфейс, используя angularJs при изменении значения области?
0
$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 значение, я хочу, чтобы это изменение в значении отображалось в пользовательском интерфейсе
Это мой 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>вывод console.log(jsonStringify (array2):
[{"Расписание": {"id": "574", "создано": "2015-11-17 22:00:35", "изменено": "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": null, "filter_reg": null, "c_count": "4", "min_batch": "15", "module_id": "9", "name": "DI-Logical Reasoning", "description ":"", "reg_start_days": "33", "reg_end_days": "инструкции" "3",": ", "draft_count": "0", "cancel_count": "0", "auto_schedule_id": нулевой, "registration_count": "16", "цель": "книга"}, "С":
2 ответа
1
Лучший ответ
Вы используете ng-controller несколько раз в шаблоне. Когда шаблон загружается и угловой находит ng-controller, контроллер twoWeekClassCtrl снова загружается с новым $scope для каждого ng-controller. Таким образом, создается три области $scope каждая из которых отличается от другой. И вот почему ваш взгляд не обновился.
Чтобы решить эту проблему, вам нужно использовать один ng-controller. Поместите этот ng-controller в шаблон сразу после тега body, так что twoWeekClassCtrl загружается один раз и создается только одна область. Как это:
<body ng-app= 'myapp'>
<div class="page-container" ng-controller="twoWeekClassCtrl">
...
...
...
</div>
</body>
Удалите ng-контроллер из всех остальных трех div.
Saad
Поделиться
-
0Спасибо большое, что это решило проблему, это была глупая ошибка с моей стороны: P
-
0@AnujMittal Не за что. Глупая ошибка случается. Примите ответ, чтобы другой пользователь мог узнать решение. Спасибо.
2
когда смена области для обновления представления попытается добавить в js после обновления области:
$scope.$apply();
Если вы видите $ digest уже в процессе, это означает, что ваша область уже освежающая. Вам не нужно вызывать функцию $ apply.
попробуйте вызвать модификацию области видимости в течение $ timeout (не забудьте импортировать ее в контроллер), она сделает "безопасную" модификацию области действия
$timeout(function() {
// run your scope modification
})
jeremy-denis
Поделиться
-
0он говорит, что $ digest уже выполняется
-
0да, это может произойти, потому что выполняется обновление области. попробуйте применить $ применить в тайм-аут
Показать ещё 2 комментария
Ещё вопросы
- 1Диалог отклонить по кнопке да
- 0Используйте изображение в кредитах Highcharts
- 0Циклы ожидания не работают
- 0проверить, существует ли запись (PDO)
- 1Sphinx - Как сделать autodoc .py файлы, расположенные в нескольких папках?
- 0используя Google API с в модуле Dojo
- 1Java сравнение данных массива независимо от размера или порядка
- 1Значения, которые не вступили в силу после того, как стали доступны в Vuex Store
- 0Не удается получить доступ к защищенному члену класса в производном классе
- 02 указателя даты в одном поле ввода
- 1Модификация LiveDataCallAdapter не вызывает функцию адаптации (вызов)
- 0Как реализовать стек с помощью std :: vector?
- 0Класс отката после функции щелчка
- 0Скрыть блоки, которые не соответствуют контейнеру фиксированного размера
- 0Отправка содержимого этой формы по электронной почте
- 0Как сделать родительский ли активным, когда ребенок меняется
- 0Невозможно использовать цепной локатор в транспортире
- 0Google Map API не загружается, когда скрипт на той же HTML-странице
- 1Как превратить TimePicker Джонатаса Уокера в плагин класса JS или jQuery
- 1Удаление плохих пикселей с помощью массива dask
- 1Панды - найдите максимальное количество 2 зависимых атрибутов и замените дублирующиеся строки этим значением
- 1Вставить текст в начале каждой новой строки
- 1Рельсы - относительные пути - методы
- 1конвертировать double в строку и показывать десятичные значения только в случае необходимости [duplicate]
- 1Как программно получить имя универсального класса?
- 1Система оценки фигуристов
- 0рассчитать и вернуть количество дней в неделю
- 0Функция фильтрации wxCheckListBox
- 0Функция триггера отображает «Глобальные события не поддерживаются и устарели»
- 1Собственный Android Inapp Покупка Где настроить лицензионный ключ RSA в кодировке Base64?
- 1Используйте разные поля для проверки в ASP.NET Identity
- 0Актуальный URL открыть страницу перенаправления в php
- 0Angularjs фильтр накопительный массив
- 0Multi CURL C ++ Постоянно поставляйте новые обработчики, когда будете готовы
- 1Объект не имеет атрибута - Имя переменной, совместно используемой классами
- 0Увеличьте загрузку ЦП более чем на 100% в XCODE 5
- 0Отправить письмо в формате html в codeigniter
- 0Изменить с iframe на всплывающее окно
- 0Сортировка списка объектов по полю даты в Java
- 0Как реализовать скриптовые события для дизайна видеоигр?
- 1Recyclerview не обновляет список данных
- 0CURLOPT_INTERFACE не работает в php
- 0Как использовать миллисекунды в сиквелизировании стандартного поля созданного на месте?
- 0HTML-теги в функции оповещения JavaScript
- 0Переменная PHP MYSQL возвращает ошибку
- 0Динамически внедрить PHP, поскольку действие формы перенаправляет на страницу 404
- 0добавить числовой индекс в таблицу MySQL
- 0Hover FadeOut для определенного класса
- 1Нахождение сходства двух массивов String
- 0Установите ширину DIV в соответствии с переменной ширины таблицы
console.log($scope.array2);?