Javascript AngularJS加载JSON数据，然后从中解析/加载HTML_Javascript_Html_Angularjs

Javascript AngularJS加载JSON数据，然后从中解析/加载HTML

javascript html angularjs

Javascript AngularJS加载JSON数据，然后从中解析/加载HTML,javascript,html,angularjs,Javascript,Html,Angularjs,首先也是最重要的是，这是我第一次遇到有棱角的人我的目标是，我有一个通知列表，我必须用limito限制，因此元素被限制为三个，单击按钮后，其余的应该加载我不明白怎么做：设置“视图”以及如何应用ng repeat 加载我设置的JSON数据，并以某种方式将其作为纯HTML从*JSON解析到视图中一切顺利后，使用Limito，这样我可以从一开始就将项目限制为3个，单击按钮后，我希望将其余项目加载到下面我请求帮助，这就是我来的时间示例代码，因为SO需要它： var app = angula

首先也是最重要的是，这是我第一次遇到有棱角的人

我的目标是，我有一个通知列表，我必须用limito限制，因此元素被限制为三个，单击按钮后，其余的应该加载

我不明白怎么做：

设置“视图”以及如何应用ng repeat
加载我设置的JSON数据，并以某种方式将其作为纯HTML从*JSON解析到视图中
一切顺利后，使用Limito，这样我可以从一开始就将项目限制为3个，单击按钮后，我希望将其余项目加载到下面

我请求帮助，这就是我来的时间

示例代码，因为SO需要它：

var app = angular.module('notifyApp', []);

app.controller('mainController', function($scope, $http) {

$http({
    method: 'GET',
    url: 'notifications.json'
}).success(function(){
    console.log('success');
}).error(function(){
    console.log('error');
});

$scope.loadmore = true;
});

这是一个

提前谢谢你

我有一个解决办法。在你的plnkr里试试

注意我是如何硬编码的

$scope.notifications

。您需要检索实际数据-无法在plnkr中找到如何检索的方法。当您检索JSON时，您必须信任数据，如下所示：

var app = angular.module('notifications', []);
app.controller('mainController', function($scope, $http, $sce) {
   $http({
        method: 'GET',
        url: 'notifications.json'
    }).success(function(data){
        console.log('success');
        $scope.notifications = data;
        for (var i=0; i<$scope.notifications.length; i++){
             $scope.notifications[i].userAction = $sce.trustAsHtml($scope.notifications[i].userAction)
        }
    }).error(function(data){
        console.log('error');
    });
    $scope.myLimit = 3;

    $scope.loadmore = true;
});

Index.html

<!DOCTYPE html>
<html lang="en" ng-app="notifications">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="script.js"></script>
</head>
<body class="container" ng-controller="mainController">
    <header>
        <a id="logo" href="www.google.com"><img src="images/logo.png" alt="logo"></a>
        <nav id="menu">
            <ul>
                <li><a href="#"><img src="images/bell.png" alt="bell icon"></a></li>
                <li>
                    <a href="#">
                        <img src="images/message.png" alt="message icon">
                        <div id="nCount">22</div>
                    </a>
                </li>
                <li><a href="#"><img src="images/profilePic.png" alt="girl profile pic"></a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="wrapper">
            <div id="list">
                <h1>My notifications</h1>
                <ul id="mainList" ng-show="notifications" class="slideInDown" ng-init="limit = myLimit">
                    <li ng-repeat="notification in notifications | limitTo: limit">
                        <figure>
                            <img src="{{notification.avatar}}" alt="other user photo">
                        </figure>

                        <div class="infoLine {{notification.type}}">
                            <a class="userName" href="#">{{notification.userName}}</a>
                            &nbsp;<span ng-bind-html="notification.userAction"></span>
                        </div>

                        <div class="whenWhat">
                            <span>
                                <img src="images/clock.png" alt="clock illustration">
                                2m
                            </span>
                            <img src="{{notification.targetObject}}" alt="photo">
                        </div>
                    </li>
                </ul>
            </div>
            <a id="loadMore" href="#" ng-show="loadmore" ng-click=" loadmore = false ; limit = notifications.length; myLimit = notifications.length" ng-class="{ active: notifications }" >Load More</a>
        </div>
    </main>
</body>
</html>


应用程序






我的通知


2米

首先，你应该使用

然后（）

承诺代替

success（）

和

error（）

。这是当前使用期票的方式

您可以使用ng repeat属性中的“limitTo=val”限制nrRepeat循环

我制作了一个片段，向您展示问题的解决方案：

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'myAppController'，['$scope'，函数（$scope）{
$scope.defaultLimit=3；//默认限制
$scope.list=[‘项目1’、‘项目2’、‘项目3’、‘项目4’、‘项目5’、‘项目6’、‘项目7’]；
$scope.showAll=函数（）{
$scope.defaultLimit=$scope.list.length；//显示所有记录
}  
}]);


{{item}

全部展示
您的plunker有几个错误
首先，index.html中的ng app
应该是notifyApp
，因为这是您在script.js
-var app=angular.module（'notifyApp'，[]）中设置的
其次：您必须将通知分配给success函数中的$scope.notifications

$http({
    method: 'GET',
    url: 'notifications.json'
}).then(function(res){
    $scope.notifications = res;
});

之后，您应该已经看到了前3个元素
您最不需要的是删除通知=！通知
从加载更多按钮的ng单击
attr
修改了Plunker
设置视图并使用ng repeat
您需要将通知存储在某个位置（可能是一个数组），然后在标记（例如div）内的html文件中使用ng repeat=“data in yourray”。如果要显示特定通知，则可以对其应用筛选器。在您的例子中，您希望最初显示3，然后在单击按钮时转到其余部分。您可以创建一个单独的数组来存储前3个通知，另一个包含整个数组，并在标记中使用ng if来显示结果

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'notificationController'，['$scope'，
职能（$范围）{
$scope.button=true；
$scope.fullArray=[item1、item2、item3、item4、item5]；
$scope.partialArray=[fullArray[0]、fullArray[1]、fullArray[2]；
函数onButtonClick（）{
$scope.button=false；
}
}
]);
因此，第一步是在成功回调上，您应该将数据保存并返回到范围中的某个位置，如：
.success(function (data) {

   $scope.myList = data;

   $scope.myListLimit = 3; // lets also set a limit for our list
}

然后，您可以将视图编写为指向ng控制器指令的元素的后代：
<div ng-controller="mainController">
  <ul ng-repeat="item in myList | limitTo: myListLimit">
    <li>{{item}}</li>
  </ul>
  <button type="button" ng-show="anyResultsPending()" ng-click="showMoreResults()">Show more results</button>
</div>



{{item}}

显示更多结果

之后，您的列表应显示3个结果，为了能够显示更多用户交互的结果，我们在控制器上创建了一个新方法：
$scope.showMoreResults = function () {

   $scope.myListLimit += 3;
}

// this is to hide the "show more results" button after the all items was shown
$scope.anyResultsPending = function () {

   return $scope.myList && $scope.myListLimit < $scope.myList.length; 
}

$scope.showMoreResults=函数（）{
$scope.myListLimit+=3；
}
//这是为了在显示所有项目后隐藏“显示更多结果”按钮
$scope.anyResultsPending=函数（）{
返回$scope.myList&&$scope.myListLimit<$scope.myList.length；
}
此外，如中所述，
当使用JSON中包含的HTML时，需要进行清理。使用此模块：
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

my services.js具有角度资源代码：
var ricksiteServices = angular.module('ricksiteServices', ['ngResource']);

ricksiteServices.factory('Page', ['$resource',
  function($resource){
    return $resource('pages/:pageId.json', {}, {
      query: {method:'GET', params:{pageId:'pages'}, isArray:true}
    });
  }]);
// actually, the pageID parameter has only one value, only the default 'pages' is used.

以下是一个解决方案，它可以解决其他一些答案无法提供的问题：

动画
使用角度工厂直接从JSON加载对象，并承诺
限制为3
项，并单击按钮加载其余项

JavaScript:
(function () {
    "use strict";

    var module = angular.module('app', ['ngAnimate']);

    module.factory('NotificationsService', ['$http', function ($http) {
        return {
            fetch: function () {
                return $http.get('notifications.json').then(function (response) {
                    return response.data
                });
            }
        };
    }]);

    module.controller('Controller', ['$scope', '$filter', 'NotificationsService', function ($scope, $filter, NotificationsService) {
        $scope.notifications = [];
        $scope.limit = 3;
        $scope.allLoaded = false;

        NotificationsService.fetch().then(function (data) {
            $scope.notifications = data;
        });

        $scope.loadAll = function () {
            $scope.limit = $scope.notifications.length;
            $scope.allLoaded = true;
        };
    }]);
})();

Html/CSS
<!doctype html>
<html ng-app="app">

<head>
    <title>ng-limit</title>

    <style>
        .my-repeat-animation.ng-enter,
        .my-repeat-animation.ng-leave,
        .my-repeat-animation.ng-move {
            -webkit-transition: 0.5s linear all;
            transition: 0.5s linear all;
            position: relative;
        }

        .my-repeat-animation.ng-enter {
            top: -20px;
            opacity: 0;
        }

        .my-repeat-animation.ng-enter.ng-enter-active {
            top: 0;
            opacity: 1;
        }

        .my-repeat-animation.ng-leave {
            top: 0;
            opacity: 1;
        }

        .my-repeat-animation.ng-leave.ng-leave-active {
            top: -20px;
            opacity: 0;
        }

        .my-repeat-animation.ng-move {
            opacity: 0.5;
        }

        .my-repeat-animation.ng-move.ng-move-active {
            opacity: 1;
        }
    </style>

    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-animate/angular-animate.js"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="Controller">
    <button ng-show="!allLoaded" ng-click="loadAll()">Load all</button>
    <div ng-repeat="notification in notifications | limitTo:limit" class="my-repeat-animation">
        <div>
            <h4>Notification: {{$index+1}}</h4>
            <div>
                Avatar: {{notification.avatar}}
            </div>
            <div>
                Type: {{notification.type}}
            </div>
            <div>
                Name: {{notification.userName}}
            </div>
            <div>
                Action: {{notification.userAction}}
            </div>
            <div>
                Target: {{notification.targetObject}}
            </div>
        </div>
    </div>
</body>

</html>


ng极限
.my-repeat-animation.ng-enter，
.my-repeat-animation.ng-leave，
.my-repeat-animation.ng-move{
-webkit过渡：0.5s线性全部；
过渡
(function () {
    "use strict";

    var module = angular.module('app', ['ngAnimate']);

    module.factory('NotificationsService', ['$http', function ($http) {
        return {
            fetch: function () {
                return $http.get('notifications.json').then(function (response) {
                    return response.data
                });
            }
        };
    }]);

    module.controller('Controller', ['$scope', '$filter', 'NotificationsService', function ($scope, $filter, NotificationsService) {
        $scope.notifications = [];
        $scope.limit = 3;
        $scope.allLoaded = false;

        NotificationsService.fetch().then(function (data) {
            $scope.notifications = data;
        });

        $scope.loadAll = function () {
            $scope.limit = $scope.notifications.length;
            $scope.allLoaded = true;
        };
    }]);
})();

<!doctype html>
<html ng-app="app">

<head>
    <title>ng-limit</title>

    <style>
        .my-repeat-animation.ng-enter,
        .my-repeat-animation.ng-leave,
        .my-repeat-animation.ng-move {
            -webkit-transition: 0.5s linear all;
            transition: 0.5s linear all;
            position: relative;
        }

        .my-repeat-animation.ng-enter {
            top: -20px;
            opacity: 0;
        }

        .my-repeat-animation.ng-enter.ng-enter-active {
            top: 0;
            opacity: 1;
        }

        .my-repeat-animation.ng-leave {
            top: 0;
            opacity: 1;
        }

        .my-repeat-animation.ng-leave.ng-leave-active {
            top: -20px;
            opacity: 0;
        }

        .my-repeat-animation.ng-move {
            opacity: 0.5;
        }

        .my-repeat-animation.ng-move.ng-move-active {
            opacity: 1;
        }
    </style>

    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-animate/angular-animate.js"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="Controller">
    <button ng-show="!allLoaded" ng-click="loadAll()">Load all</button>
    <div ng-repeat="notification in notifications | limitTo:limit" class="my-repeat-animation">
        <div>
            <h4>Notification: {{$index+1}}</h4>
            <div>
                Avatar: {{notification.avatar}}
            </div>
            <div>
                Type: {{notification.type}}
            </div>
            <div>
                Name: {{notification.userName}}
            </div>
            <div>
                Action: {{notification.userAction}}
            </div>
            <div>
                Target: {{notification.targetObject}}
            </div>
        </div>
    </div>
</body>

</html>