0
我是新來的角，我試圖把通知列表放在一起。非常基本。顯示通知摘要列表。用戶可以點擊通知並顯示通知的詳細信息。這JSFiddle顯示了我放在一起。使用Angular ng顯示和ajax請求獲取詳細信息
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請求獲取通知詳細信息，然後顯示詳細信息。
我不知道如何解決這個問題。我有一個模糊的想法，我需要一個指令和一個模板，但不知道如何切換通知詳細信息模板的顯示。我希望有一個更簡單的解決方案。有人能指引我朝着正確的方向嗎？
你只需要做一個AJAX請求，初始化一些$ scope。來自成功回調的詳細變量，並在顯示細節的div上使用ng-show或ng-if。不要像從前那樣通過控制器進行DOM操作。 – 2015-02-05 16:54:30
明白了。沒有DOM操作。我確實嘗試了你的建議[這裏]（http://jsfiddle.net/DexLab/Lf67f7jc/2/）。但是，您一次只能顯示一個通知的詳細信息。你的評論，並通過這個老JSFiddle確實給了我一個方法，但使這項工作，雖然。如果有效，我會更新。 – 2015-02-05 18:08:23
我現在正在爲解決方案工作，給我一點時間，我希望能發表一個答案。 – Bricktop 2015-02-05 18:15:48