Using ng-options with JSON data - javascript

I'm still trying to find my way with AngularJS. I have a JavaScript code that uses URL to return JSON data as an array. I need help with populating the same data in select using ng-options.
data to populate on the select

This isn't how you ask for help, but nevermind. Given a JSON object like this
var JsonArray = [{
id: 1,
name: 'Jane',
address: 'Jane\'s house'
}, {
id: 2,
name: 'Jill',
address: 'Jill\'s house'
}, {
id: 3,
name: 'John',
address: 'John\'s house'
}, {
id: 4,
name: 'Jack',
address: 'Jack\'s house'
}];
When you want to use ng-select with ng-options, you need to specify 3 required fields :
your table
the name that every object will take (like a for ... each loop)
The property you want to see in your options
You also can specify a track by property to give your options a given value.
<select ng-model="mySelect" ng-options="object.name for object in JsonArray track by object.id"></select>
Now, use the last piece of code, and inspect it in a brwoser. You will understand everything.
For reference :
<select ng-model="mySelect" ng-options="[object].[chosenProperty] for [object] in [yourArray] track by [object].[property]"></select>

Related

Fill a Select field with a Json call back using AngularJs

I'm a pretty new in this area (one mounth) and I'm developing application with angularJs, I'm getting back Json requisition with a list, I have to put the name ({{empresa.name }}) when the user select I get the ID({{empresa.IdEmpresa}}).
I want use ng-repeat for that, something like (ng-repeat="empresa in empresas").
I'm getting the Json with the list from the JavaController, my Entity is named Empresa, I declare a empty object on angular Like that ( $scope.empresas = {}) and give the callback to this emprty object, right?!
My select field is like that
<label>Empresa</label>
<select class="form-control">
<option value="{{empresa.EmpresaId}}">{{empresa.name}}</option>
</select>
how do I use repeat in this ?
Assuming your JSON data look like this
$scope.empresas = [
{ EmpresaId: 1, name: 'one' },
{ EmpresaId: 2, name: 'two' },
{ EmpresaId: 3, name: 'three' }
]
Apart from using ng-repeat on <options>, you can also utilise ng-options
<select ng-options="e.EmpresaId as e.name for e in empresas" ng-model="???"></select>
You can use ng-repeat="empresa in empresas" on the <option> tags.
Here's an example:
<select>
<option ng-repeat="empresa in empresas" value="{{empresa.EmpresaId}}">{{empresa.name}}</option>
</select>
Controller Code
$scope.empresas = [
{ EmpresaId: 101, name: 'India' },
{ EmpresaId: 102, name: 'US' },
{ EmpresaId: 103, name: 'UK' }
];

How to create following type of json that will usefull in type ahead with angular js

I have successfully implement type ahead using angular js using this codepen.
Now my data is dynamic so I want to create my own json that should looks something like following:
$scope.states = [
{
name: "ABCD",
id: "AB"
},
{
name: "XYZ",
id: "XY"
},
{
name: "OPQR",
id: "OP"
},
{
name: "LMNO",
id: "LM"
},
{
name: "KLM",
id: "KL"
}
];
How to create like above json and store in $scope variable so I can access it using name and id separately.
Please help me...!!
I am giving by my own now cause I got it little bit late.
Solution is I have pushed the data wrong I have solved it like:
$scope.states.push({
name: "string",
id: int,
});
and I got it.

Angular chosen is not binding Array of Objects

I'm using angular chosen plugin for selecting an attribute on any select element.
My data is in this format:
$scope.pets = [
{
id: '1',
name: 'Dog',
desc:"Something"
},
{
id: '2',
name: 'Cat',
desc:"Something"
},
{
id: '3',
name: 'Rat',
desc:"Something"
}
];
And the angular choosen implementation for displaying the name using ng-options is:
<select multiple ng-model="myPets" ng-options="r as r.name for r in pets" chosen>
I'm able to get the drop down using ng-options for the above data like this,
But how can I bind the default values into the angular choosen input box if my ng model is bind to the following object:
$scope.myPets= {
id: '6',
name: 'Pig',
desc:"Something"
},
You can set the default values in the controller by using
$scope.myPets= [$scope.pets[0], $scope.pets[5]];
Compared to what you were thinking you need to use an array [] because you are using select multiple. You also have to directly refer to the existing objects or angular/javascript won't recognize the connection.

Can handontable pivot data

Handsontable really fits my needs when it comes to UI interaction. But was wondering if it can also pivot data.
I have Json data that looks like this:
var objectData = [
{id: 1, name: "Ted Right", gender: "male"},
{id: 2, name: "Bill Allan", gender: "male"},
{id: 1, name: "Joan Well", gender: "female"},
{id: 2, name: "Jane Doe", gender: "female"}
];
where id value should be the row name and the gender value should be the column header and the name is the value in the table.
I'm not sure it's possible natively within the framework, but it looks like you can dynamically pass an array containing the column definitions to the table instance while creating it, so you could potentially handle it that way in javascript - you might want to check out this example.
How to create dynamic columns for Handsontable?
Old thread I know, but it's the first one that comes up for handsontable pivot table, so hopefully this helps someone.
To set custom row/column headers, have a look here:
http://handsontable.com/demo/renderers_html.html#header
Portion from above page:
$container.handsontable({
colHeaders: [
"<b>Bold</b> and <em>Beautiful</em>",
"Some <input type='checkbox' class='checker'> checkbox"
]
})

How do I set the value for a select statement?

http://jsfiddle.net/WcJbu/
When I select a person, I want the favoriteThing selector to display their current selection.
<div ng-controller='MyController'>
<select ng-model='data.selectedPerson' ng-options='person.name for person in data.people'></select>
<span ...> likes </span>
<select ... ng-model='data.favoriteThing' ng-options='thing.name for thing in data.things'></select>
</div>
$scope.data.people = [{
name: 'Tom',
id: 1,
favorite_thing_id: 1
}, {
name: 'Jill',
id: 2,
favorite_thing_id: 3
}];
$scope.data.things = [{
name: 'Snails',
id: 1
}, {
name: 'Puppies',
id: 2
}, {
name: 'Flowers',
id: 3
}];
Do I need to set up a service and add watches, or is there a [good] way to use the favorite_thing_id directly in the select?
Change the second select to this:
<select ng-show='data.selectedPerson' ng-model='data.selectedPerson.favorite_thing_id'
ng-options='thing.id as thing.name for thing in data.things'></select>
Adding the thing.id as to the ng-options will allow you to select the data.things entries based on their id's instead of their references. Changing the ng-model to data.selectedPerson.favorite_thing_id will make angular automatically change to the correct option based on selectedPerson.favorite_thing_id.
jsfiddle: http://jsfiddle.net/bmleite/4Qf63/
http://jsfiddle.net/4Qf63/2/ does what I want - but it's pretty unsatisfying.
$scope.$watch(function() {
return $scope.data.selectedPerson;
}, function(newValue) {
if (newValue) {
$scope.data.thing = $filter('filter')($scope.data.things, {id: newValue.favorite_thing_id})[0];
}
})
I'd like to see all of that be possible from within the select statement.
Maybe I'll try to write a directive.
association = {key: matchValue}
So that I can do
<select ... ng-model='data.thing' ng-options='t.name for t in data.things' association='{id: "data.selectedPerson.favorite_thing_id"}'></select>

Categories