Редактирование результатов поиска 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.