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