me9*_*867 7 javascript json stringify angularjs
我现在正在将外部JSON URL中的数据正确地提取到母版页,但我的详细信息页似乎没有传递从http.get接收的对象initallt.该应用程序的主要部分可以在CODEPEN的代码笔中查看
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search Slugname">
<button class="button button-dark" ng-click="getOrders()">Submit</button>
</label>
如果我的用户想手动更改日期(order.date)值以说"10/8/16".如何访问/编辑从外部API返回的任何JSON值？
我最终希望在我的应用程序中编辑返回的JSON数据,然后将修改后的数据发布回PHP API服务器.
您的主要问题是您想要修改 $http 调用传入的数据。
\n\n您可以实现一个http拦截器，方法response将获取响应修改它，然后将其返回给调用者。由于 http 拦截器将接受所有传入请求，因此只需检查 url start 即可，不要修改其他请求。
\n\nangular.module(\'ionicApp\', [\'ionic\'])\n.factory(\'httpInterceptor\', function($q, $rootScope) {\n var httpInterceptor = {\n response: function(response) {\n var deferred = $q.defer();\n var results = response.data;\n var urlStart = \'http://mvcframe.com/wpapi/wp-json/wp/v2/pages?slug=\';\n if (response.config.url.startsWith(urlStart)) {\n angular.forEach(results, function(result, key) { \n result.date = \'10/8/16\'; \n });\n }\n deferred.resolve(response);\n return deferred.promise;\n }\n };\n return httpInterceptor;\n})\n.config(function($httpProvider) { \n $httpProvider.interceptors.push(\'httpInterceptor\'); \n})\n.controller(\'ListController\', \n [\'$scope\', \'$http\', \'$state\', \'$stateParams\', \'$window\', \'$location\', \n function($scope, $http, $state, $stateParams, $window, $location) {\n $scope.getOrders = function(query) {\n $http.get(\'http://mvcframe.com/wpapi/wp-json/wp/v2/pages?slug=\' + query)\n .success(function(data) {\n $scope.orders = data;\n })\n }\n $scope.orders = [];\n}]);\n我对您的 html 所做的唯一修改是将查询参数直接发送到 ng-click 上的函数
\n\n<html ng-app="ionicApp">\n<head>\n <meta charset="utf-8">\n <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">\n <title>Tabs Example</title>\n <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">\n <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>\n</head>\n<body ng-controller="ListController">\n <ion-header-bar class="bar-dark" align-title="center">\n <h2 class="title">Order Search</h2>\n </ion-header-bar>\n <ion-content padding="true" class="has-header">\n <div class="item item-input">\n <i class="icon ion-search placeholder-icon"></i>\n <input type="text" ng-model="query" placeholder="Search Slugname">\n <button type="submit" class="button button-dark" ng-click="getOrders(query)">Submit</button>\n </div>\n <p>An example and working slug search term is test-3. The JSON can be viewable in a browser using https://mvcframe.com/wpapi/wp-json/wp/v2/pages?slug=test-3</p>\n <ion-list>\n <ion-item ng-repeat="order in orders | filter:query" class="item-thumbnail-left item-text-wrap" href="#/tab/list/{{order.id}}">\n <h2>Page ID: {{order.id}}</h2>\n <h3>Date created: {{order.date}}</h3>\n <h2>Page URL: \xc2\xa3{{order.link}}</h2>\n <h2>Page Title: \xc2\xa3{{order.title/rendered}}</h2>\n </ion-item>\n </ion-list>\n </ion-content>\n</body>\n</html>\n我差点忘了 codepen 在这里： http ://codepen.io/pachon1992/pen/QEodJR
\n\n编辑 - - - - - - - - - - - - - -
\n\n根据评论，您希望用户手动更新数据，对吗？例如，您想要更新日期，您可以启用用户的输入来编辑数据，因为角度是双向数据绑定将修改您的数据。
\n\n<html ng-app="ionicApp">\n<head>\n <meta charset="utf-8">\n <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">\n <title>Tabs Example</title>\n <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">\n <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>\n</head>\n<body ng-controller="ListController">\n <ion-header-bar class="bar-dark" align-title="center">\n <h2 class="title">Order Search</h2>\n </ion-header-bar>\n <ion-content padding="true" class="has-header">\n <div class="item item-input">\n <i class="icon ion-search placeholder-icon"></i>\n <input type="text" ng-model="query" placeholder="Search Slugname">\n <button type="submit" class="button button-dark" ng-click="getOrders(query)">Submit</button>\n </div>\n <p>An example and working slug search term is test-3. The JSON can be viewable in a browser using https://mvcframe.com/wpapi/wp-json/wp/v2/pages?slug=test-3</p>\n <ion-list>\n <ion-item ng-repeat="order in orders | filter:query" class="item-thumbnail-left item-text-wrap" href="#/tab/list/{{order.id}}">\n <h2>Page ID: {{order.id}}</h2>\n <div><input type="text" ng-model="order.date"></div>\n <h2>Page URL: \xc2\xa3{{order.link}}</h2>\n <h2>Page Title: \xc2\xa3{{order.title/rendered}}</h2>\n </ion-item>\n <button type="button" class="button button-dark" ng-click="update()">Update</button>\n </ion-list>\n </ion-content>\n</body>\n</html>\n在您的控制器中，您可以为每个订单调用 http 服务，通常通过 PUT 端点调用
\n\nangular.module(\'ionicApp\', [\'ionic\'])\n\n.controller(\'ListController\', [\'$scope\', \'$http\', \'$state\', \'$stateParams\', \'$window\', \'$location\',\n function($scope, $http, $state, $stateParams, $window, $location) {\n $scope.query = "";\n $scope.getOrders = function(query) {\n $http.get(\'http://mvcframe.com/wpapi/wp-json/wp/v2/pages?slug=\' + query)\n .success(function(data) {\n $scope.orders = data;\n });\n }\n $scope.orders = [];\n $scope.update = function() {\n angular.forEach($scope.orders, function(order) {\n //whetever url you are using\n $http.put(\'http://mvcframe.com/wpapi/wp-json/wp/v2/pages/update/\' + order.id, order, {})\n .success(function(data) {\n console.log(\'updated\');\n });\n });\n };\n }\n]);\n我已经编辑了 codepen
\n