R. Mani Selvam R. Mani Selvam - 1 year ago 43
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 Source

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.