Question

我现在正在将外部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）值，请说出＆＃34; 10/8/16＆＃34;。 如何访问/编辑从外部API返回的任何JSON值？

我最终希望在我的应用程序中编辑返回的JSON数据，然后将修改后的数据发布回PHP API服务器。

Answer 1

https://codepen.io/anon/pen/qNLOAP

显然，<label> ng-click中的按钮似乎无法显示。我将标签更改为<div>并开始工作。

目前搜索不起作用，但这应该让你前进。

Answer 2

您的主要问题是您想要修改来自$ http电话的传入数据。

您可以实现一个http拦截器，方法响应将采取响应修改它，然后将其返回给调用者。由于http拦截器将采取所有传入请求，只需检查url start是否不修改其他请求。

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上做的唯一修改是将查询参数直接发送到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>

在您的控制器中，您可以为每个通常通过PUT端点调用的订单调用http服务

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

Answer 3

请解决列出的要点。

1＆GT; tabs.home表示你没有注入控制器，另一件事也是定义home.html和

2 - ;所有其他模板在与您的控制器并行的模板文件夹中可分离。

3＆GT;对http://mvcframe.com/wpapi/wp-json/wp/v2/pages的http调用需要跨域支持，因为您可以使用chrome（CORS）插件。

它对我有用。请检查并告诉我它是否有效。

Answer 4

工作笔： https://codepen.io/jasondecamp/pen/gryxGQ

我做的两个改变是： 1）在对“查询”的引用中添加了$ parent;在输入字段ng-model中。我不熟悉离子，但我的猜测是ion-content指令添加了一个子范围，以便引用你需要查看父级的查询。

<input type="search" ng-model="$parent.query" placeholder="Search Slugname">

2）我将http get url更改为https，因为我收到了不安全的访问警告。

作为一个注释，当响应是纯JSON数据时，您不需要使用任何JSON解析函数，因为angular $ http服务将自动识别数据并将其转换为js对象。

从Angular中编辑JSON搜索结果

4 个答案: