I have this URL working with my site using wp-api -
http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=midlands
which outputs this code (using a chrome plugin to display it neatly) -
I'm really new to this and would appreciate if someone could point me in the right direction of how to use AngularJS (This is what I've read is best to use) to display this data on a useable page.
This is the code I have so far pulling in the data -
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a region</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest">North West</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast">North East</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=midlands">Midlands</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=eastanglia">East Anglia</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=southeast">South East</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=southwest">South West</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=scotland">Scotland</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=wales">Wales</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northernireland">Northern Ireland</option>
<option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=channel">Channel Islands</option>
<select>
<input type=button value="Go" onclick="goToNewPage()" />
The link - http://scd.blaze.wpengine.com/test/
Thanks for any help in advance!
Ok there is not much Angular in your code but here is a starting point:
View:
<div ng-app="myApp" ng-controller="regionsCtrl">
<label>Select a region:</label>
<select ng-options="region for region in regions" ng-model="region" ng-change="getRegionData()">
</select>
<table>
<tr>
<th>id</th>
<th>Title</th>
<th>Status</th>
<th>Type</th>
</tr>
<tr ng-repeat="d in data">
<td>{{d.ID}}</td>
<td>{{d.title}}</td>
<td>{{d.status}}</td>
<td>{{d.type}}</td>
</tr>
</table>
</div>
Controller:
var app = angular.module('myApp', []);
app.controller('regionsCtrl', function($scope, $http) {
$scope.regions = [
'North West', 'North East', 'Midlands', 'East Anglia', 'South East', 'South West', 'Scotalnd', 'Wales'
]
$scope.getRegionData = function() {
var region = $scope.region
$http.get("http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=#{region}").then(function(data) {
$scope.data = data; //this is the data that server returns
})
}
});
take a look at this fiddle
What this does is makes an call to the server using the region from the select menu, then stores the array returned from server in a variable on the scope (data in this case), then you can iterate over it in your view using ng-repeat.
Bear in mind that I can't access the server due to cors but if you have the right credentials it should work.
Related
Hi Im trying to list the items selected from the drop-down box and display it in a table using angularjs.So here is the code,
https://plnkr.co/edit/8qCgB2flMGB89moppkz6?p=preview
abc.html
Car Brand:
<select name="carname" ng-model="userSelect" required>
<option value="">--Select--</option>
<span ng-show="valdate.carname.$error.required">Car name</span>
<option ng-repeat="ManufactureBrand in a" ng-bind="ManufactureBrand" >
{{ManufactureBrand}}
</option>
</select>
<br/>
<br/> Car Model:
<select name="carmodel" ng-model="selectCar" required>
<option value="">--Select--</option>
<span ng-show="valdate.carmodel.$error.required">Car name</span>
<option ng-repeat="CarName in b" ng-bind="CarName">
{{CarName}}
</option>
</select>
<br/>
<input type="submit" ng-click="checkselection()" ng-disabled="valdate.carname.$invalid && valdate.carmodel.$invalid">
<table>
<tr>
<th>Car Name</th>
<th>Car Model</th></tr>
<tr>
<td>{{list}}</td>
<td>{{carlist}}</td>
</tr>
</table>
abc.js
var app = angular.module('carService', []);
app.factory('Brandtest', function () {
var brand = {};
brand.sample = ['Bmw', 'Mercedes', 'Honda'];
brand.car = ['Suv', 'Sedan', 'Cope'];
{
return brand;
}
});
app.controller('selectDropdown', ['$scope', 'Brandtest', function ($scope, Brandtest) {
$scope.a = Brandtest.sample;
$scope.b = Brandtest.car;
$scope.list=[];
$scope.carlist=[];
$scope.checkselection = function () {
if ($scope.userSelect != "" && $scope.userSelect != undefined &&
$scope.selectCar != "" && $scope.selectCar != undefined )
{
$scope.list.push($scope.userSelect);
$scope.carlist.push($scope.selectCar);
}
I have also attached image, how my final result is displayed.
here all the items in list once submitted are overlapping in the same row.
So, please help me to properly display the table and also on submitting the selected item from drop down I want them to be one below the other.
please check this working plunkr
The following are the code modified
<table>
<tr>
<th>Car Name</th>
<th>Car Model</th></tr>
<tr ng-repeat="carz in list track by $index">
<td>{{carz}}</td>
<td>{{carlist[$index]}}</td>
</tr>
</table>
Myself have a angularjs sample with filters here where i can filter the values with exact match using the true comparator as,
<table>
<tr ng-repeat="user in users | filter:{name: name, phone: phone} : true">
<td>{{user.name}}</td>
<td>{{user.phone}}</td>
<td>{{user.secret}}</td>
</tr>
</table>
It works great with combination filters when using angularjs version 1.1.5 where as it returns null for other angularjs versions when user filters and return back to --select-- position.
Reference: with angularjs 1.1.5
, with angularjs 1.4.x
You can see updated demo. It is working fine as your requirement. I have updated AngularJS 1.4.8 in javascript.
HTML Code
<div ng-app="plunker">
Name: <select ng-model="name">
<option value="">select</option>
<option value="John1">John1</option>
<option value="Mike">Mike</option>
</select>
Phone: <select ng-model="phone">
<option value="">select</option>
<option value="555-1276">555-1276</option>
</select>
<table>
<tr ng-repeat="user in users | filter:{name: name, phone: phone} : true">
<td>{{user.name}}</td>
<td>{{user.phone}}</td>
<td>{{user.secret}}</td>
</tr>
</table>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.users = [{name:'John1', phone:'555-1276', secret:'shhh'},
{name:'John1', phone:'800-BIG-MARY', secret:'psst'},
{name:'Mike', phone:'555-4321', secret:'shhh'},
{name:'Adam', phone:'555-5678', secret:'shhh'},
{name:'Julie', phone:'555-8765', secret:'shhh'}];
});
Match with user.name not name as you are using ng-repeat = "user in users" .
I'm an angular newbie and am working on a small project and have come across a weird problem with ng-controller. When I use the controller within my partial view, the customer's name does not get passed into the value property.
However, if I inject the customersFactory (which has a function that makes an http request to the database to get all customers) into the ordersController, everything works fine.
My routeProvider code:
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'ordersController',
templateUrl: 'partials/orders.html'
})
.when('/customers', {
controller: 'customersController',
templateUrl: 'partials/customers.html'
})
.otherwise({
redirectTo: '/'
})
});
myApp.factory('ordersFactory', function($http) {
var orders = [];
var factory = {};
factory.getOrders = function(callback) {
$http.get('/orders').success(function(data) {
orders = data;
callback(orders);
})
}
factory.addOrder = function(data) {
return $http.post('/add/order', data);
}
factory.deleteOrder = function(id) {
return $http.delete('/delete/order/' + id);
}
return factory;
});
myApp.factory('customersFactory', function($http) {
var customers = [];
var factory = {};
factory.getCustomers = function(callback) {
$http.get('/customers').success(function(data) {
customers = data;
callback(customers);
})
}
factory.addCustomer = function(data) {
return $http.post('/add/customer', data);
}
factory.removeCustomer = function(customer_id) {
return $http.delete('/delete/customer/' + customer_id);
}
return factory;
});
myApp.controller('ordersController', function($scope, ordersFactory) {
var getOrders = function() {
ordersFactory.getOrders(function(data) {
$scope.orders = data;
});
}
getOrders();
$scope.addOrder = function() {
console.log($scope.order);
ordersFactory.addOrder($scope.order);
$scope.order = {};
getOrders();
}
$scope.deleteOrder = function(id) {
ordersFactory.deleteOrder(id);
getOrders();
}
});
myApp.controller('customersController', function($scope, customersFactory) {
var getCustomers = function() {
customersFactory.getCustomers(function(data) {
$scope.customers = data;
})
}
getCustomers();
$scope.addCustomer = function() {
customersFactory.addCustomer($scope.customer);
$scope.customer = {};
getCustomers();
}
$scope.removeCustomer = function(customer_id) {
customersFactory.removeCustomer(customer_id);
getCustomers();
}
});
Here's the orders.html partial page.
<h2>Add New Order</h2>
<form>
<label for="name">Customer</label>
<select name="name" ng-model="order.name" ng-controller="customersController">
<option ng-repeat="customer in customers" value="{{customer.name}}">{{ customer.name }}</option>
</select>
<label for="quantity">Order</label>
<select name="quantity" ng-model="order.quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="product" ng-model="order.product">
<option value="Nike Shoes">Nike Shoes</option>
<option value="Black Belts">Black Belts</option>
<option value="Ice Creams">Ice Creams</option>
<option value="Candies">Candies</option>
<option value="Waffles">Waffles</option>
</select>
<input type="submit" value="Order" ng-click="addOrder()">
</form>
<table>
<thead>
<tr>
<td>Customer Name</td>
<td>Product</td>
<td>Quantity</td>
<td>Date</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{ order.name }}</td>
<td>{{ order.product }}</td>
<td>{{ order.quantity }}</td>
<td>{{ order.date }}</td>
<td>Remove</td>
</tr>
</tbody>
</table>
Can anyone please explain why this is the case? My initial guess is that it has something to do with not explicitly assigning $scope.customers but I am under the impression that as soon as ng-controller is detected, it executes all of the "self-executing functions" which would then assign the data to $scope.customers. Thanks in advance.
Use ng-model in place of value and instead of <option> tag use ng-options in select tag it is fast as compare the <option> tag
<select name="name" ng-model="order.name" ng-controller="ordersController" ng-options="customer as customer in customers" />
Use the ngOptions directive instead. The documentation can be found here: https://docs.angularjs.org/api/ng/directive/ngOptions
<select name="name" ng-model="order.name" ng-options="customer as customer.name for customer in customers track by customer.name" ng-controller="ordersController">
Try ng-model="customer.name" instead of value="{{customer.name}}"
Thanks so much for your feedback. I think I've figured out the root of my issue(s).
I am not using ng-options to iterate over an array full of objects.
I am calling the ordersController in the routeProvider but am overriding it with customersController which is causing ng-model="order.name" to not be passed into the scope.
Any pointers on what I can do to fix #2? Does "ng-controller='customersController' have to come before the tag in order for "ng-options" to display the options correctly?
I'm an old "backender" and pretty new to Angular and modern frontend programming, but I have to learn...
I have the following problem: There is a list with several different person properties, which are created via ng-repeat from Controller response. The values are editable, but the display control depends on the type of the property. The Gender, for example, needs to be edited via a Select-Box. The options for the select box are obtained from a Rest-Server.
So now the main question: How can I build different Select Boxes for each property?
I tried the following code, which is not working:
<section class="contactProperty" ng-repeat="property in contactDetail.properties">
<table>
<tr>
<td>{{property.message}}</td>
<td rowspan=2>{{property.value}}
<script>
var lst = ContactDetailController.getClassification(property.type);
</script>
<input ng-show="{{property.displaystyle_id}}==1" type="text" ng-model="property.value"/>
<select ng-show="{{property.displaystyle_id}}==3" ng-model="property.value">
<option ng-repeat="opt in lst" value="{{opt.id}}">{{opt.message}}</option>
</select>
</td>
</tr>
<tr>
<td>
<select type="text" ng-model="property.status_id">
<option ng-repeat = "status in contactDetail.propertyStatus" value="{{status.id}}">{{status.message}}</option>
</select>
</td>
</tr>
</table>
</section>
The Controller is defined on the top level element with following code
.controller('ContactDetailController',
['$scope', '$rootScope', 'ContactDetailService',
function ($scope, $rootScope, ContactDetailService) {
$scope.getContactDetail = function () {
ContactDetailService.getContactDetail(function(response) {
if(response.success) {
$scope.contactDetail=response;
} else {
$scope.error = response.message;
}
});
};
$scope.getClassifications= function(type) {
ContactDetailService.getClassifications(type, function(response) {
if (response.success) {
return response;
}
});
};
$scope.getContactDetail();
}]);
And the corresponding service:
.factory('ContactDetailService',
['$http', '$rootScope', '$location',
function ($http, $rootScope, $location) {
var service = {};
service.getContactDetail = function(callbackFunc) {
delete $http.defaults.headers.common['X-Requested-With'];
var apiRoot="";
apiRoot = $rootScope.environments[window.location.host];
$rootScope.apiRoot=apiRoot;
var id=$location.search().id;
$http.get(apiRoot+'/contactdetail?id='+id, {})
.success(function(response){
$rootScope.contactDetail=response;
callbackFunc(response);
}).error(function(response){
alert("error"+response.message);
});
};
service.getClassifications = function(type, callbackFunc) {
var apiRoot="";
apiRoot = $rootScope.environments[window.location.host];
$http.get(apiRoot+'/classifications?type='+type, {})
.success(function(response) {
callbackFunc(response);
})
.error(function(response) {
alert("error"+response.message);
});
};
return service;
}]);
Can anyone help me?
you can show/hide fields using ng-show/ng-hide or ng-if or ng-switch depending on your type of variable selected. if this is what you want.
I will try to explain more precisley:
This is a part of my incomming Json from the Backend:
"properties": [
{
"id": 8,
"type_id": 25,
"status_id": 13,
"contact_id": 4,
"value": "27",
"create_date": null,
"update_date": null,
"guikey": "gui.gender",
"message": "Geschlecht",
"displaystyle_id": 3,
"queryparam": "9",
"options": [
{
"id": 26,
"type": 9,
"guikey": "gui.male",
"language": "de",
"message": "Männlich",
"displaystyle_id": 0
},
{
"id": 27,
"type": 9,
"guikey": "gui.female",
"language": "de",
"message": "Weiblich",
"displaystyle_id": 0
}
]
}
],
It is rendered by following code:
<section class="contactProperty" ng-repeat="property in contactDetail.properties">
<table>
<tr>
<td>{{property.message}}</td>
<td rowspan=2 ng-switch on="property.displaystyle_id">{{property.value}}
<input ng-switch-when="1" type="text" ng-model="property.value"/>
<input ng-switch-when="2" type="date" ng-model="property.value"/>
<select ng-switch-when="3" ng-model="property.value">
<option ng-repeat="opt in property.options" value="{{opt.id}}">{{opt.message}}</option>
</select>
</td>
</tr>
<tr>
<td>{{property.status_id}}
<select type="text" ng-model="property.status_id">
<option ng-repeat = "status in contactDetail.propertyStatus" value="{{status.id}}">{{status.message}}</option>
</select>
</td>
</tr>
</table>
</section>
The resulting HTML contains a Select box as expacted:
<section class="contactProperty ng-scope" ng-repeat="property in contactDetail.properties">
<table>
<tbody>
<tr>
<td class="ng-binding">Geschlecht</td>
<td class="ng-binding" on="property.displaystyle_id" ng-switch="" rowspan="2">
27
<select class="ng-scope ng-pristine ng-valid" ng-model="property.value" ng-switch-when="3">
<option class="ng-binding ng-scope" value="26" ng-repeat="opt in property.options">Männlich</option>
<option class="ng-binding ng-scope" value="27" ng-repeat="opt in property.options">Weiblich</option>
</select>
</td>
</tr>
<tr>
</tbody>
</table>
</section>
But the Browser displays the Value "Männlich" in this example, but I expected to see "Weiblich" because the property.value 27 is passed from the json. I just show the value for debug as {{property.value}} and it shows 27, which is correct. I don't understand why the dropdown still showing the first entry (26/Männlich) in this case...
So i'm learning angularJS and was messing around with the ng-repeat, and $http service.
I picked a webservice to return some data, and put it into the ng-repeat and that all works fine.
I want to be able to re-organise the table A-Z, Z-A by color name, but I cant get it working. I'm pretty sure it's something to do with the structure of the JSON i'm getting back.
JSFiddle: http://jsfiddle.net/wshekyls/bKGPj/
HTML Code:
<div ng-controller="testCtrl">Sort :
<select ng-model="selectedColumn">
<option value="name">A-Z</option>
<option value="-name">Z-A</option>
</select>
<table>
<tr>
<th>Name</th>
<th>Cloth</th>
<th>Leather</th>
<th>Metal</th>
</tr>
<tr ng-repeat="color in colorData | orderBy:selectedColumn">
<td>{{color.name}}</td>
<td style="background: rgb({{color.cloth.rgb.join()}});">{{color.cloth.rgb}}</td>
<td style="background: rgb({{color.leather.rgb.join()}});">{{color.cloth.rgb}}</td>
<td style="background: rgb({{color.metal.rgb.join()}});">{{color.cloth.rgb}}</td>
</tr>
</table> <pre>{{colorData | json}}</pre>
<!-- !!!!!!!!! -->
</div>
JS:
var app = angular.module('myApp', []);
function testCtrl($scope, $http) {
$http.get('https://api.guildwars2.com/v1/colors.json').success(function (data) {
$scope.colorData = data.colors;
});
$scope.selectedColumn = 'name';
}
Your return data is not an array and orderBy only works with array...
You should push all your data into array on order to work with orderBy if you rearrange your code like this it will work...
$http.get('https://api.guildwars2.com/v1/colors.json').success(function (data) {
$scope.colorData = [];
angular.forEach(data.colors, function(color){
$scope.colorData.push(color);
});
});
here is workin JSFIDDLE...