Fatal编程技术网
  • angularjs/
  • Angularjs 使用Angular ng show和ajax请求获取详细信息

Angularjs 使用Angular ng show和ajax请求获取详细信息

angularjs

Angularjs 使用Angular ng show和ajax请求获取详细信息,angularjs,master-detail,Angularjs,Master Detail,我是angular的新手，我正在尝试整理一份通知列表。真的很基本。将显示通知的摘要列表。然后，用户可以单击通知，并显示通知的详细信息。这显示了我所做的一切 var notificationsApp=angular.module（'notificationsApp'，[]）； var notificationListCtrl=NotificationsApp.controller（'notificationListCtrl'[ “$scope”、“$http”， 函数（$scope，$http）

我是angular的新手，我正在尝试整理一份通知列表。真的很基本。将显示通知的摘要列表。然后，用户可以单击通知，并显示通知的详细信息。这显示了我所做的一切

var notificationsApp=angular.module（'notificationsApp'，[]）；
var notificationListCtrl=NotificationsApp.controller（'notificationListCtrl'[
“$scope”、“$http”，
函数（$scope，$http）{
$scope.notifications=getNotifications（）；
函数getNotifications（）{
风险值数据=[{
“id”：“1”，
“主_行”：“缺少时间表条目”，
“二次线”：“1月28日”，
“摘要项”：false，
“消息”：“通知说明。在这里做点什么。诸如此类，诸如此类”，
“行动”：[{
“类型”：“导航”，
“url”：”http://somedomain.cm/app/234",
“url_文本”：“更新”
},{
“类型”：“职位”，
“url”：”http://somedomain.com/app/api/v1/234",
“url_文本”：“批准”
}]
},{
“id”：“2”，
“主行”：“需要采购需求审批”，
“第二行”：“账户333445，由詹姆斯申请”，
“摘要项”：false，
“消息”：“另一个通知消息。立即采取行动。”，
“行动”：[{
“类型”：“导航”，
“url”：”http://somedomain.com/pr/requisitions/434",
“url_文本”：“编辑”
},{
“类型”：“职位”，
“url”：”http://somedomain.com/pr/api/v1/requisitions/434",
“url_文本”：“批准”
}]
}, {
“id”：“3”，
“主要内容”：“需要注意多个项目”，
“第二行”：“，
“摘要项”：正确，
“消息”：”
}, {
“id”：“4”，
“主行”：“您的请假请求已批准”，
“二次线”：“1月28日”，
“摘要项”：false，
“消息”：“还有一条通知消息。你需要做点什么。”，
“行动”：[{
“类型”：“导航”，
“url”：”http://somedomain.com/pr/requisitions/434",
“url_文本”：“编辑”
}]
}];
返回数据；
}
$scope.showNotificationDetail=函数（notificationId）{
$（'div#'+notificationId）.toggle（300）；
}
$scope.doNotificationPost=函数（postrl）{
控制台日志（“POST:+postrl”）；
}
$scope.doNotificationNavigation=函数（navigationUrl）{
log（“导航：+navigationUrl”）；
}
}]);

正文{
背景色：#F8F6ED
}
保险商实验室
{
边际上限：0；
边缘底部：2px；
填充：0；
}
锂
{
字体系列：格鲁吉亚；
背景色：#EFE7D5；
列表样式：无；
左边距：0px；
}
A.
{    
文字装饰：无；
}
#初级的
{
填充：1%2%02%；
字号：18px；
颜色：#978778；
}
#次要的
{
填充：0.2%1%2%；
字体大小：14px；
颜色：5B4F48；
}
隐藏的分区通知{
显示：无；
}
.内联{
显示：内联块；
垂直对齐：中间对齐；
}
.提交{
左边距：自动；
右边距；自动；
文本对齐：右对齐；
}
按钮。通知按钮{
宽度：85px；
高度：30px；
}
按钮{
背景色：#cf6b28；
边界：0无；
边界半径：4px；
颜色：#fff；
光标：指针；
字体大小：粗体；
填充：6px 15px；
}
按钮。修改按钮{
背景色：#978778；
颜色：#fff；
光标：指针；
边界：0无；
边界半径：4px；
字体大小：粗体；
填充：6px；15px；
}



通知
没有通知

    
{{notification.primary_line}
{{notification.message}}
{{action.url_text}
{{action.url_text}



我为您的问题组装了一个解决方案，该解决方案使用了大量的范围操作，并且通常使用范围（我发现您对角度范围不太熟悉，因此我认为这可能有助于您了解更多关于角度范围的信息）

首先，你可以在plnkr中找到我的代码。在这里：

Index.html


<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.0-beta.3" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
<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="$parent.showdetail = !showdetail;loadData($parent);">
                    <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 id="{{notification.id}}" ng-show="showdetail">
                    <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.ressource.message}}
                    </div>
                    <div class="submit">
                        <div class="inline" ng-repeat="action in notification.ressource.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>  
  </body>

</html>


对我所做工作的简短描述：

我添加了一个范围变量
showdeail
，用于隐藏和显示每个通知。要理解它是如何工作的，你必须

var notificaitonsApp = angular.module('notificationsApp', []);
var notificationListCtrl = notificaitonsApp.controller('NotificationListCtrl', [
        '$scope', '$http','$timeout',
        function($scope, $http, $timeout) {

            $scope.notifications = getNotifications();

            $scope.showdetail = false;

            function getNotifications() {
              var Data = [{
                "id": "1",
                "primary_line": "Missing Timesheet Entry",
                "secondary_line": "Jan 28th",
                "summary_item": false,
                "ressource":{
                    "message": "loading ..."
                }
                },{
                    "id": "2",
                    "primary_line": "Purchase Reqest Approval Needed",
                    "secondary_line": "Account 333445, Requested by James",
                    "summary_item": false,
                    "ressource":{
                        "message": "loading ..."
                    }
                }, {
                    "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,
                    "ressource":{
                        "message": "loading ...",
                        "actions":[]
                    }
                }];

                return Data;
            }


            $scope.loadData = function(parent) {
             $timeout(function(){},1000).then(function(result){
               var value = {
                    "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"
                        }]
                };
                parent.notification.ressource = value;
             });
            };


            $scope.doNotificationNavigation = function(navigationUrl) {
                console.log("Navigation: " + navigationUrl);
            }
        }]);