0
나는 새로운 편이며 알림 목록을 작성하려고합니다. 정말 기본. 알림의 요약 목록이 표시됩니다. 그런 다음 사용자가 알림을 클릭하면 알림의 세부 정보가 표시됩니다. 이 JSFiddle은 내가 조립 한 것을 보여줍니다.아약스 요청시 Angular ng-show를 사용하여 세부 정보를 얻으십시오.
이 방법은 오히려 자신의 세부 사항 단지 요약 목록을 표시하는 행동으로 모든 알림을로드하지 않는 게 좋을 작동하지만
var notificaitonsApp = angular.module('notificationsApp', []);
var notificationListCtrl = notificaitonsApp.controller('NotificationListCtrl', [
'$scope', '$http',
function($scope, $http) {
$scope.notifications = getNotifications();
function getNotifications() {
var Data = [{
"id": "1",
"primary_line": "Missing Timesheet Entry",
"secondary_line": "Jan 28th",
"summary_item": false,
"message": "A notification description. Do something here. Blah, blah, blah",
"actions": [{
"type": "Navigation",
"url": "http://somedomain.cm/app/234",
"url_text": "Update"
},{
"type": "Post",
"url": "http://somedomain.com/app/api/v1/234",
"url_text": "Approve"
}]
},{
"id": "2",
"primary_line": "Purchase Reqest Approval Needed",
"secondary_line": "Account 333445, Requested by James",
"summary_item": false,
"message": "A different notification message. Take action now.",
"actions": [{
"type": "Navigation",
"url": "http://somedomain.com/pr/requisitions/434",
"url_text": "Edit"
},{
"type": "Post",
"url": "http://somedomain.com/pr/api/v1/requisitions/434",
"url_text": "Approve"
}]
}, {
"id": "3",
"primary_line": "Multiple Items Need Your Attention",
"secondary_line": "",
"summary_item": true,
"message": ""
}, {
"id": "4",
"primary_line": "Your Time Off Request was Approved",
"secondary_line": "Jan 28th",
"summary_item": false,
"message": "Yet another notification message. You need to do something.",
"actions": [{
"type": "Navigation",
"url": "http://somedomain.com/pr/requisitions/434",
"url_text": "Edit"
}]
}];
return Data;
}
$scope.showNotificationDetail = function(notificationId) {
$('div#' + notificationId).toggle(300);
}
$scope.doNotificationPost = function(postUrl) {
console.log("POST: " + postUrl);
}
$scope.doNotificationNavigation = function(navigationUrl) {
console.log("Navigation: " + navigationUrl);
}
}]);body {
background-color: #F8F6ED
}
ul
{
margin-top: 0;
margin-bottom: 2px;
padding: 0;
}
li
{
font-family: Georgia;
background-color: #EFE7D5;
list-style: none;
margin-left: 0px;
}
a
{
text-decoration: none;
}
#primary
{
padding: 1% 2% 0 2%;
font-size: 18px;
color: #978778;
}
#secondary
{
padding: 0 2% 1% 2%;
font-size: 14px;
color: #5B4F48;
}
div.notification_hidden {
display: none;
}
.inline {
display: inline-block;
vertical-align: middle;
}
.submit {
margin-left: auto;
margin-right; auto;
text-align: right;
}
button.notification_button {
width: 85px;
height: 30px;
}
button.action_button {
background-color: #cf6b28;
border: 0 none;
border-radius: 4px;
color: #fff;
cursor: pointer;
font-weight: bold;
padding: 6px 15px;
}
button.modify-button {
background-color: #978778;
color: #fff;
cursor: pointer;
border: 0 none;
border-radius: 4px;
font-weight: bold;
padding: 6px; 15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="notificationsApp">
<div ng-controller="NotificationListCtrl">
<div>
Notifications
</div>
<div id="notifications">
<div ng-if="notifications.length == 0">
No Notifications
</div>
<ul ng-if="notifications.length > 0" ng-repeat="notification in notifications">
<a ng-if="notification.summary_item == false" ng-href="#here" ng-click="showNotificationDetail(notification.id)">
<li id="primary">{{notification.primary_line}}</li>
<li id="secondary">{{notification.secondary_line}}</li>
</a>
<a ng-if="notification.summary_item == true" href="{{notification.summary_url}}" id="{{notification.id}}">
<li id="primary">{{notification.primary_line}}</li>
</a>
<div class="notification_hidden" id="{{notification.id}}">
<div class="inline-block">
<div class="inline" id="primary_line">
{{notification.primary_line}}
</div>
<div class="inline" style="float: right">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAYAAABi8KSDAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAAH1JREFUKFN1kEsKwCAMRL3/4Vzorq2fiJsW75A6UkVTFB46SYYkqlJuTslzPWpHzzfh/cExXi0gQTyEsz6/YoCANEDPsZEAMPSWuKV5KQYxOrZWV5Orcs0tAhA5NkYz0X/pRaBtHwOm7RhyGSCX3hZ2ZoPKmcY/7sD8pTz8AhpjX7xHPMGHAAAAAElFTkSuQmCC" alt="Close"/>
</div>
</div>
<div id="message_container">
{{notification.message}}
</div>
<div class="submit">
<div class="inline" ng-repeat="action in notification.actions">
<div class="inline" ng-if="action.type == 'Navigation'">
<button class="notification_button modify-button" ng-click="doNotificationNavigation(action.url)">{{action.url_text}}</button>
</div>
<div class="inline" ng-if="action.type == 'Post'">
<button class="notification_button action_button" ng-click="doNotificationPost(action.url)" type="submit">{{action.url_text}}</button>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
</div>어떻게 접근해야할지 모르겠습니다. 지시문과 템플릿이 필요하지만 통지 세부 템플릿의 표시를 어떻게 토글할지 모르는 모호한 생각이 있습니다. 나는 더 간단한 해결책이 있기를 바라고있다. 누군가 올바른 방향으로 나를 가리킬 수 있습니까?
간단히 AJAX 요청을하고 $ 범위를 초기화하십시오.세부 변수를 성공 콜백에서 가져오고 ng-show 또는 ng-if를 사용하여 세부 정보를 표시하는 div에 표시합니다. 당신이하는 것처럼 컨트롤러에서 DOM 조작을하지 마십시오. –
알았어요. DOM 조작이 없습니다. 나는 당신이 [여기] (http://jsfiddle.net/DexLab/Lf67f7jc/2/)에서 제안한 것을 시도했다. 그러나 한 번에 하나의 알림에 대해서만 세부 사항을 표시 할 수 있습니다. 귀하의 의견 및이 오래된 JSFiddle 통해 나 에게이 작업을 할 수있는 방법에 대한 아이디어를주지 않았다. 그것이 작동하면 나는 업데이 트됩니다. –
나는 해결책을 찾고있다. 지금은 조금 시간을주고 대답을 게시 할 수있다. – Bricktop