Редактирование результатов поиска JSON из Angular
теперь я правильно вытягиваю данные из внешнего URL-адреса JSON на главную страницу, но моя страница сведений, похоже, не передает объект initallt, полученный от http.получить. Эту основную часть приложения можно просмотреть в Code Pen по адресу сайт 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>
Если мой пользователь хотел изменить дату (заказ.дата) значение вручную сказать "10/8/16". как я могу получить доступ/изменить любое из значений JSON, которые возвращаются из внешнего API?
Я в конце концов хотите отредактировать возвращенные данные JSON в моем приложении, а затем опубликовать эти пересмотренные данные обратно на сервер PHP API.
4 ответов
ваша главная проблема заключается в том, что вы хотите изменить входящие данные из $HTTP вызов.
вы можете реализовать перехватчик http, ответ метода будет принимать ответ изменить его,а затем вернуть его вызывающему. Поскольку http-перехватчик будет принимать все входящие запросы, просто проверьте URL-адрес, чтобы не изменять другие запросы.
angular.module('ionicApp', ['ionic'])
.factory('httpInterceptor', function($q, $rootScope) {
var httpInterceptor = {
response: function(response) {
var deferred = $q.defer();
var results = response.data;
var urlStart = 'http://mvcframe.com/wpapi/wp-json/wp/v2/pages?slug=';
if (response.config.url.startsWith(urlStart)) {
angular.forEach(results, function(result, key) {
result.date = '10/8/16';
});
}
deferred.resolve(response);
return deferred.promise;
}
};
return httpInterceptor;
})
.config(function($httpProvider) {
$httpProvider.interceptors.push('httpInterceptor');
})
.controller('ListController',
['$scope', '$http', '$state', '$stateParams', '$window', '$location',
function($scope, $http, $state, $stateParams, $window, $location) {
$scope.getOrders = function(query) {
$http.get('http://mvcframe.com/wpapi/wp-json/wp/v2/pages?slug=' + query)
.success(function(data) {
$scope.orders = data;
})
}
$scope.orders = [];
}]);
единственное изменение, которое я сделал в вашем html, - это отправить запрос param непосредственно в функцию на ng-click
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="ListController">
<ion-header-bar class="bar-dark" align-title="center">
<h2 class="title">Order Search</h2>
</ion-header-bar>
<ion-content padding="true" class="has-header">
<div class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="query" placeholder="Search Slugname">
<button type="submit" class="button button-dark" ng-click="getOrders(query)">Submit</button>
</div>
<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>
<ion-list>
<ion-item ng-repeat="order in orders | filter:query" class="item-thumbnail-left item-text-wrap" href="#/tab/list/{{order.id}}">
<h2>Page ID: {{order.id}}</h2>
<h3>Date created: {{order.date}}</h3>
<h2>Page URL: £{{order.link}}</h2>
<h2>Page Title: £{{order.title/rendered}}</h2>
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
я почти забыл, что codepen здесь:http://codepen.io/pachon1992/pen/QEodJR
изменить ---------------------------
в соответствии с комментариями вы хотите, чтобы ваш пользователь вручную обновил данные? в качестве примера вы хотели бы обновить дату, вы можете сделать включение ввода для пользователя для редактирования данных, так как angular является двусторонней привязкой данных, изменит ваши данные.
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="ListController">
<ion-header-bar class="bar-dark" align-title="center">
<h2 class="title">Order Search</h2>
</ion-header-bar>
<ion-content padding="true" class="has-header">
<div class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="query" placeholder="Search Slugname">
<button type="submit" class="button button-dark" ng-click="getOrders(query)">Submit</button>
</div>
<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>
<ion-list>
<ion-item ng-repeat="order in orders | filter:query" class="item-thumbnail-left item-text-wrap" href="#/tab/list/{{order.id}}">
<h2>Page ID: {{order.id}}</h2>
<div><input type="text" ng-model="order.date"></div>
<h2>Page URL: £{{order.link}}</h2>
<h2>Page Title: £{{order.title/rendered}}</h2>
</ion-item>
<button type="button" class="button button-dark" ng-click="update()">Update</button>
</ion-list>
</ion-content>
</body>
</html>
в вашем регуляторе вы можете вызвать http-служба для каждого вызова заказа обычно через конечную точку PUT
angular.module('ionicApp', ['ionic'])
.controller('ListController', ['$scope', '$http', '$state', '$stateParams', '$window', '$location',
function($scope, $http, $state, $stateParams, $window, $location) {
$scope.query = "";
$scope.getOrders = function(query) {
$http.get('http://mvcframe.com/wpapi/wp-json/wp/v2/pages?slug=' + query)
.success(function(data) {
$scope.orders = data;
});
}
$scope.orders = [];
$scope.update = function() {
angular.forEach($scope.orders, function(order) {
//whetever url you are using
$http.put('http://mvcframe.com/wpapi/wp-json/wp/v2/pages/update/' + order.id, order, {})
.success(function(data) {
console.log('updated');
});
});
};
}
]);
я отредактировал codepen
https://codepen.io/anon/pen/qNLOAP
Так, по-видимому, кажется, что у вас не может быть кнопки в <label> с ng-click. Я изменил ярлык на <div> и он начал работать.
поиск не работает в данный момент, но это должно вам начать работу.
пожалуйста, разрешите перечисленные пункты.
1> вкладки.домашнее состояние у вас нет инжектированного контроллера, и другое дело также определяет дом.html и
2> все остальные шаблоны отдельно в папке templates параллельно вашим контроллерам.
3> http-вызов http://mvcframe.com/wpapi/wp-json/wp/v2/pages требуется поддержка домена cross origin для этого вы можете использовать плагин chrome (CORS).
Он будет работать для меня. Пожалуйста, проверьте и дайте мне знайте, если это работает.
Рабочая Ручка: https://codepen.io/jasondecamp/pen/gryxGQ
два изменения, которые я сделал были: 1) добавлен $parent в ссылку на "запрос" в поле ввода ng-model. Я не так хорошо знаком с ionic, но я предполагаю, что директива Ion-content добавляет дочернюю область, поэтому для ссылки на запрос вам нужно посмотреть на родителя.
<input type="search" ng-model="$parent.query" placeholder="Search Slugname">
2) я изменил HTTP get url на https, потому что я получал небезопасный доступ предупреждение.
как Примечание, вам не нужно использовать функцию синтаксического анализа JSON, когда ответ-это чистые данные JSON, потому что angular $http service автоматически распознает данные и преобразует их в объект js.