R. Mani Selvam R. Mani Selvam - 3 months ago 9
AngularJS Question

How Can I Sort the [Array] Value Elements in Angularjs?

I am using MEAN stack in my application with AngularJS as my front-end. How can I filter the count and quality fields,My Plunker For example:- In the Count drop down list is

yarn count , carn count ,burn count
.. if I select the
yarn count
that particular transaction only need to display....Please look at my plunker and help us.My Plunker

How I should customize My JSON to work with the array inside an array (or) How I should make
ng-repeat
inside
ng-repeat
to achieve above given scenario.

My Html :-

<select data-ng-model="searchtable.count" id="count" ng-options="item.colorshades[0].count for item in sryarnorders" class="form-control">
<option value="">All</option>
</select>


And

<select data-ng-model="searchtable.quality" id="quality" ng-options="item.colorshades[0].quality for item in sryarnorders" class="form-control" >
<option value="">All</option>
</select>


My data-ng-model:-

data-ng-model="searchtable.count"


And

data-ng-model="searchtable.quality"


My Filter code:-

filter:searchtable


My Data:-

$scope.sryarnorders = [
{
"_id": "573d7fa0760ba711126d7de5",
"user": {
"_id": "5721a378d33c0d6b0bb30416",
"displayName": "ms ms"
},
"__v": 1,
"colorshades": [{
"_id": "573d7fc3760ba711126d7de6",
"quality": "Home Textiles",
"count": "yarn count"
},
{
"_id": "579ef3feba3bac040b583b50",
"color": "56a5b6831746bc1c0b391c7c",
"quality": "Hall Textiles",
"count": "carn count"
}],
"created": "2016-05-19T08:56:00.997Z",
"actual_delivery_date": "2016-05-19",
"ex_india_date": "2016-05-19",
"ex_factory_date": "2016-05-19",
"po_delivery_date": "2016-05-19",
"supplier_name": "Fsa",
"buyer_name": "e21"
},

{
"_id": "56ffc6d5ab97a73d1066b798",
"user": {
"_id": "56ff7bece2b9a1d10cd074a3",
"displayName": "saravana kumar"
},
"__v": 1,
"colorshades": [{
"_id": "56ffc723ab97a73d1066b799",
"quality": "Hall Textiles",
"count": "burn count"
}],
"created": "2016-04-02T13:19:17.746Z",
"actual_delivery_date": "2016-04-02",
"ex_india_date": "2016-04-04",
"ex_factory_date": "2016-04-02",
"po_delivery_date": "2016-04-02",
"supplier_name": "Fsa",
"buyer_name": "Binary hand"
},

{
"_id": "56ffc5e0ab97a73d1066b796",
"user": {
"_id": "56ff7bece2b9a1d10cd074a3",
"displayName": "saravana kumar"
},
"__v": 1,
"colorshades": [{
"_id": "56ffc608ab97a73d1066b797",
"quality": "yarn quality",
"count": "carn count"
}],
"created": "2016-04-02T13:15:12.876Z",
"ex_india_date": "2016-04-02",
"ex_factory_date": "2016-04-02",
"po_delivery_date": "2016-04-02",
"supplier_name": "Fsa",
"buyer_name": "e21"
}];


I have created Plunker for reference:- My Plunker

My Local Host Data:-

{
"_id": "579ef3adba3bac040b583b4f",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 1,
"colorshades": [
{
"color": "56a5b6aa1746bc1c0b391c7d",
"quality": "onenew",
"count": "number"
},
{
"_id": "579ef3feba3bac040b583b50",
"color": "56a5b6831746bc1c0b391c7c",
"quality": "onenew",
"count": "checking"
}
],
"created": "2016-08-01T07:01:01.181Z",
"supplier_name": "Msd",
"buyer_name": "Mani selvam .R"
},
{
"_id": "5768e6c8bdbc5db509f0f2b2",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 1,
"colorshades": [
{
"_id": "5768e6fcbdbc5db509f0f2b3",
"price_per_kg_currency": "Rs",
"color": "56d6821f8b6a5c6209d239b9",
"quality": "onenew",
"count": "number"
}
],
"created": "2016-06-21T07:03:36.504Z",
"supplier_name": "Msd",
"buyer_name": "Rohit"
},
{
"_id": "5767cd78f5012d790aa41a7b",
"user": {
"_id": "57400c32bd07906c1308e2cf",
"displayName": "mani selvam"
},
"__v": 3,
"colorshades": [
{
"_id": "5767ce37f5012d790aa41a7c",
"color": "56d6821f8b6a5c6209d239b9",
"quality": "new",
"count": "checking"
}
],
"created": "2016-06-20T11:03:20.382Z",
"purchase_order_no": "0987",
"supplier_name": "Mani selvam",
"buyer_name": "ms"
}

Answer

The select model always returns the full object in the array, not what you set as value. For example, when selecting "yarn count" in your plunker, searchtable.count equals to

{"_id":"573d7fa0760ba711126d7de5","user":{"_id":"5721a378d33c0d6b0bb30416","displayName":"ms ms"},"__v":1,"colorshades":[{"_id":"573d7fc3760ba711126d7de6","quality":"Home Textiles","count":"yarn count"},{"_id":"579ef3feba3bac040b583b50","color":"56a5b6831746bc1c0b391c7c","quality":"Hall Textiles","count":"carn count"}],"created":"2016-05-19T08:56:00.997Z","actual_delivery_date":"2016-05-19","ex_india_date":"2016-05-19","ex_factory_date":"2016-05-19","po_delivery_date":"2016-05-19","supplier_name":"Fsa","buyer_name":"e21"}

Given this, there are two solutions:

1. Filter accordingly

Filter like that:

| filter:searchtable.count.colorshades[0].count | filter:searchtable.quality.colorshades[0].quality

Which doesn't look clean.

2. Changing Options

You can also change the ng-options like this:

item.colorshades[0].count as item.colorshades[0].count for item in sryarnorders 

Which will make ng-model return only item.colorshades[0].count. You will still have to adjust the filter:

| filter:searchtable.count | filter:searchtable.quality

It might be possible to make that cleaner, I am going to have to look into that.