在 Angular 中编辑 JSON 个搜索结果
Editing JSON search results from within Angular
我现在正在从外部 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”。 如何 access/edit 从外部 API 返回的任何 JSON 值？
我最终希望在我的应用程序中编辑返回的 JSON 数据，然后 post 将修改后的数据返回到 PHP API 服务器。
https://codepen.io/anon/pen/qNLOAP
很明显，<label> 和 ng-click 中似乎不能有按钮。我将标签更改为 <div>，它开始工作了。
目前无法搜索，但应该可以继续搜索。
请解决列出的问题。
1> tabs.home 声明你没有注入控制器，另一件事也定义了 home.html 和
2> 所有其他模板分别位于与您的控制器平行的模板文件夹中。
3> 对 http://mvcframe.com/wpapi/wp-json/wp/v2/pages 的 http 调用需要跨域支持，您可以使用 chrome (CORS) 插件。
它对我有用。请检查并告诉我它是否有效。
您的主要问题是您想要修改来自 $http 调用的传入数据。
您可以实现一个 http 拦截器，方法 response 将采用响应对其进行修改，然后 return 将其发送给调用者。由于 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 所做的唯一修改是将查询参数直接发送到 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
工作笔：
https://codepen.io/jasondecamp/pen/gryxGQ
我做的两个改变是：
1) 在输入字段 ng-model 中将 $parent 添加到对 'query' 的引用中。我不太熟悉 ionic，但我猜 ion-content 指令添加了一个子作用域，因此要引用查询，您需要查看父作用域。
<input type="search" ng-model="$parent.query" placeholder="Search Slugname">
2) 我将 http get url 更改为 https，因为我收到了不安全的访问警告。
请注意，当响应是纯 JSON 数据时，您不需要使用任何 JSON 解析函数，因为 angular $http 服务会自动识别数据并转成js对象
我现在正在从外部 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”。 如何 access/edit 从外部 API 返回的任何 JSON 值？
我最终希望在我的应用程序中编辑返回的 JSON 数据，然后 post 将修改后的数据返回到 PHP API 服务器。
https://codepen.io/anon/pen/qNLOAP
很明显，<label> 和 ng-click 中似乎不能有按钮。我将标签更改为 <div>，它开始工作了。
目前无法搜索，但应该可以继续搜索。
请解决列出的问题。
1> tabs.home 声明你没有注入控制器，另一件事也定义了 home.html 和
2> 所有其他模板分别位于与您的控制器平行的模板文件夹中。
3> 对 http://mvcframe.com/wpapi/wp-json/wp/v2/pages 的 http 调用需要跨域支持，您可以使用 chrome (CORS) 插件。
它对我有用。请检查并告诉我它是否有效。
您的主要问题是您想要修改来自 $http 调用的传入数据。
您可以实现一个 http 拦截器，方法 response 将采用响应对其进行修改，然后 return 将其发送给调用者。由于 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 所做的唯一修改是将查询参数直接发送到 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
工作笔： https://codepen.io/jasondecamp/pen/gryxGQ
我做的两个改变是： 1) 在输入字段 ng-model 中将 $parent 添加到对 'query' 的引用中。我不太熟悉 ionic，但我猜 ion-content 指令添加了一个子作用域，因此要引用查询，您需要查看父作用域。
<input type="search" ng-model="$parent.query" placeholder="Search Slugname">
2) 我将 http get url 更改为 https，因为我收到了不安全的访问警告。
请注意，当响应是纯 JSON 数据时，您不需要使用任何 JSON 解析函数，因为 angular $http 服务会自动识别数据并转成js对象