Develop Reference

Ember js pushObject overriding the array

I am working on Ember.js
and i have a select element which is set to send value "onchange" i am receiving the value without any problem ..
But i want to save every selection into an array and display it on the fly in labels
Here is my template.hbs
<div class="panel-body">
<div class="form-group">
<select name="services" id="services" class="form-control" onchange={{action 'setValue' value="target.value"}}>
<option> Select Services </option>
{{#each services as |service|}}
<option value="{{service.name}}">{{service.name}}</option>
{{/each}}
</select>
</div>
<div class="form-group">
{{selectedService}}
{{#each selectedService as |selection index|}}
<span class="label label-primary">{{index}} {{selection}}</span>
{{/each}}
</div>
</div>
and here is my controller
actions: {
setValue(ser){
var selectedService = [];
this.set('selectedService', ser);
selectedService.pushObject(ser);
console.log(selectedService);
}
i tried to log "selectedService[1]" and select two items but it's not working it keeps on overriding the first item :(

The reason with your case is you are constantly setting the selectedService to a new array. Instead of that; you need to get the selectedService of the controller and push to it. I mean the following:
export default Ember.Controller.extend({
selectedService: [],
actions: {
setValue(ser){
this.get('selectedService').pushObject(ser);
}
}
});
You initialize the selectedService once for the controller and can constantly push to the same array.
Can you please check the following twiddle, I guess this is close to what you want.

Display overview text when dropdown item is selected in AngularJS

I am looking to display an overview of each widget category to appear above the filtered results when that widget category is selected.
I am assuming this will require a ng-show directive so will perhaps require some controller code too. But any pointers on linking up select dropdown with my ng-repeat and linking up with ng-show would be great.
Here is what I am aiming for:
Before
After
<ion-view title="Select Box Filter" id="page6" class=" ">
<ion-content padding="true" class="has-header">
<ion-list id="tListSelectFilter-list11" class=" ">
<label class="item item-select " id="tListSelectFilter-select1">
<span class="input-label">Select</span>
<select></select>
</label>
<ion-item id="tListSelectFilter-list-item25" class=" ">Widget Range 1</ion-item>
<ion-item id="tListSelectFilter-list-item26" class=" ">Widget Range 2</ion-item>
<ion-item id="tListSelectFilter-list-item27" class=" ">Widget Range 3</ion-item>
</ion-list>
<ion-item ng-repeat="product in products | filter:select" class="item-thumbnail-left item-text-wrap"
href="#/tab/list/{{product.item}}">
<h2>Product Name: {{product.name}}</h2>
<h3>Quantity: {{product.quantity}}</h3>
<h2>Price: £{{product.price}}</h2>
</ion-item>
</ion-content>
</ion-view>
<!--Widget Range 1 Overview Text - Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected.
Widget Range 2 Overview Text - Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected.
Widget Range 3 Overview Text - Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected.-->
https://plnkr.co/edit/0WrinKY2X7Ijq32hBzms

Here would be your ng-repeat
<span>{{description}}</span>
<ion-item ng-repeat="product in products | filter:select"
class="item-thumbnail-left item-text-wrap" ng-click="showDescription(product)" >
<h2>Product Name: {{product.name}}</h2>
<h3>Quantity: {{product.quantity}}</h3>
<h2>Price: £{{product.price}}</h2>
</ion-item>
This would be inside the controller
// description initialized to nothing
$scope.description = '';
$scope.showDescription = function(product) {
$scope.description = product.description;
}
Now this assumes that the description for each product is apart of the product object - just as the name, quantity, and price.

I would create json object array for categories as
$scope.categories = [
{"name":"Category 1", "description": "This is description of category1"}
{"name":"Category 2", "description": "This is description of category2"}
{"name":"Category 3", "description": "This is description of category1"}
]
I will bing this array to create the category list.
<ion-list id="tListSelectFilter-list11" class=" ">
<label class="item item-select " id="tListSelectFilter-select1">
<span class="input-label">Select</span>
<select></select>
</label>
<ion-item id="tListSelectFilter-list-item25" class=" " ng-repeat="c in categories" ng-model="selected.category">
{{c.name}}
</ion-item>
</ion-list>
<span>{{selected.category.description || ""}}</span>

This is how you can do it.
Keep your data as json obj array in controller. This will contain : Select item names and related descriptions.
Keep a place holder in controller for the currently selected option, you can use this too display the information on your page within the controller scope.
P.S : I have done it in simple HTML to show how this can be achieved. In case of any doubts do comment.
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function() {
this.selected = "";
this.data = [{
"name": "Widget 1",
"desc": "Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected."
}, {
"name": "Widget 2",
"desc": "Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected."
}, {
"name": "Widget 3",
"desc": "Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected."
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl as ctrl">
<select ng-model="ctrl.selected" ng-options="widget.name for widget in ctrl.data">
<option value="">Please select</option>
</select>
<div>{{ctrl.selected.desc}}</div>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</div>

Apply filter based on select list - Angular JS

Array 1: Categories -> Category_Name, Category_Id
Array 2: Items -> Item_name ... etc , Category_Belonging_Id
I need to filter shown items based on selected category.
<div class="list>
<select>
<option ng-repeat="category in categories" ng-model="category_type">
{{category.Category_Name}}
</option>
</select>
<a ng-repeat="item in items | filter: // What should I put here?" href="#">
...
</a>
</div>

first of all you should use ng-option instead of ng-repeat like
<select ng-model="category_type" ng-options="category.Category_Name for category in categories"></select>
and use filter like
filter:{Category_Belonging_Id:category_type.Category_Id }
see demo here

Assuming you have:
Catergory = {
id
name
}
and
MeatType{
id
catergoryId
name
}
You can do something like
<a ng-repeat="item in meatTypes | filter: {categoryId : catergory_type.id}" href="#">

Try this
<a ng-repeat="item in meatTypes | filter: {Category_Belonging_Id:category_type.Category_Id }" href="#">

how to show/hide div based on drop down selection using angular?

i want to show and hide a div based on selection from the drop down , here is my code, this is my html code for dropdown which fetches the values from the "selectItemsFilterCriteria" json structure
<select ng-model="appointment" ng-change="changeme()" ng-options="item.name for item in selectItemsFilterCriteria">
<option ng-option value="" >Filter Criteria</option>
</select>
this is my changeme() function created inside a controller
$scope.changeme = function() {
$scope.appointment = $scope.items[0];
}
this is code for my div that is to be show or hide , right now my code is working on selection of first option from drop down it is showing me the div but the problem is that its not hiding that div on the selection of any other option from the dropdown list, kindly tell me where i m doing wrong??
<div class="mycontainer" ng-show=appointment >
<div class="left-nav">
<accordion close-others="true">
<accordion-group ng-repeat="item in pagedItems[currentPage] |filter:{name:item.name}| orderBy:sortingOrder:reverse">
<accordion-heading>
<table>
<tr class="odd" ng-click="showDataDetail=!showDataDetail" style="cursor: pointer">
<td><p class="lead-name">{{item.name}}</p>
<p class="call-up-icon">{{item.phoneNo}} </p>
<p>Lead Date : 07/02/2015</p></td>
<td><p></p>
<p class="blue-txt">{{item.trade}}</p>
<p class="fl cstm-wdth">GNU09</p>
<p class="fl">{{item.time}}</p>
<div class="cb"></div>
</td>
<td><p>Today</p>
<p>C#SQL</p>
<p class="blue-remark-icon"></p></td>
</tr>
</table>
</accordion-heading>
<div>{{item.data}}</div>
</accordion-group>
</accordion>
</div>
</div>
items array:
$scope.selectItemsFilterCriteria = [
{id:1 , name:"Appointments Scheduled"},
{id:2 , name:"fresh leads"}
];

Basically the problem is with your ng-change function call,
$scope.changeme = function() {
$scope.appointment = $scope.items[0];
}
You are setting appointment to first value of items array. Hence whenever you change the options, the function sets it back to first option , in turn the div is shown.
Please remove the ng-change function and try.

Remove the $scope.changeme() function. It is not necessary.
Since you are using ng-model on select whatever option you select will get assigned to the ng-model i.e appointment in your case.
Here is the plunkr example

Editing property from Object in ng-repeat from LocalStorage

I'm listing an array of objects saved into Localstorage in a table-like layout.
Each row displays data saved in a particular object. I want to be able to edit and update certain properties from the object once it has already been saved into LocalStorage.
This is how a couple of my objects looks like:
[{
"date":"2014 10 16",
"time":"20.22",
"car":"396",
"driver":"Seb",
"from":"A",
"destination":"B",
"pax":"3",
"arrival":"23.10"
},
{
"date":"2014 10 16",
"time":"23.22",
"car":"46",
"driver":"Eric",
"from":"C",
"destination":"E",
"pax":"3",
"arrival":"00.10"
}]
So far my frontend code displaying the Destination property looks like this:
HTML
<div class="col-md-3"
ng-show="editItem == false"
ng-hide="editItem">{{record.destination}}</div>
// Shows current value
<div class="col-md-3"
ng-show="editItem == true"
ng-hide="!editItem">
<select class="form-control"
ng-model="locationList2"
ng-options="location.place for location in locationlist | orderBy:'place'">
<option value="">Destination</option>
</select>
</div>
// Shows select with options to be picked to update property
<div class="col-md-1">
<button ng-click="editItem = !editItem"
ng-show="!editItem">Edit</button>
<button ng-click="editData(record); editItem = !editItem"
ng-show="editItem">Ok</button>
</div>
//Toggles between current value and select and triggers editData function
Relevant JS:
$scope.editData = function (record) {
record.destination = $scope.locationList2;
jsonToRecordLocalStorage($scope.recordlist);
}
So far when I trigger editData it just deletes the Destination property, it doesn't update it with the model of locationList2 from the Select.
What am I missing?
EDIT
Here's the complete ng-repeat piece of code:
<div class="row msf-row" ng-repeat="record in recordlist | filter: search">
<div class="col-md-1">{{record.time}}</div>
<div class="col-md-1"><strong>{{record.car}}</strong></div>
<div class="col-md-1">{{record.driver}}</div>
<div class="col-md-3">{{record.from}}</div>
<div class="col-md-3"
ng-show="editItem == false"
ng-hide="editItem">
{{record.destination}}
</div>
<div class="col-md-3"
ng-show="editItem == true"
ng-hide="!editItem">
<select class="form-control"
ng-model="locationList2"
ng-options="location.place for location in locationlist | orderBy:'place'">
<option value="">Destination</option>
</select>
</div>
<div class="col-md-1">{{record.pax}}</div>
<div class="col-md-1">
<button
ng-click="editItem = !editItem"
ng-show="!editItem">
<i class="fa fa-pencil"></i>
</button>
<button
ng-click="editData(record); editItem = !editItem"
ng-show="editItem">
<i class="fa fa-check"></i>
</button>
</div>
</div>
Also, I here's a Plunkr to ilustrate the issue!
Add a driver, car code and location before starting to see the app running and the mentioned problem.

You could use angular-local-storage as an abstraction over LocalStorage API.
If you want to just hack it, you can do something along localStorage.setItem('data', JSON.stringify(data)) when setting data and use JSON.parse(localStorage.getItem('data')) to extract it. LocalStorage doesn't deal with objects by default so we have to serialize it.
Regardless of the solution you choose, it could be a good idea to extend your edit a bit:
$scope.editData = function (recordlist) {
$scope.recordlist.destination = $scope.locationList2;
// replace whole LocalStorage data here now. no need to "patch" it
updateLocalStorage('data', <data containing your objects goes here>);
}
If you have multiple ways to modify the data and want to avoid explicit update, you could set up a watcher instead:
$scope.$watch(<data name goes here>, function(newVal) {
// update your LocalStorage now
});
Why it fails with ng-repeat?
The reason you see the behavior is quite simple. $scope.locationList2 is a single variable that gets bound for each member created by ng-repeat. That explains why it stays empty during edit.
You will need to bind the data using some other way. Consider binding it directly to your record models. Example: AngularJS - Using $index in ng-options .
Solution
The original code had bits like this:
JS:
$scope.editData = function (record) {
record.destination = $scope.location;
jsonToRecordLocalStorage($scope.recordlist);
};
HTML:
<select class="form-control" ng-model="location" ng-options="location.place for location in locationlist | orderBy:'place'">
<option value="">Destination</option>
</select>
Note that the markup is inside a ng-repeat and effectively each item created by it points at the same location! This isn't good.
To make it work I changed it like this:
JS:
$scope.editData = function () {
jsonToRecordLocalStorage($scope.recordlist);
};
HTML:
<select class="form-control" ng-model="record.destination" ng-options="location.place as location.place for location in locationlist | orderBy:'place'">
<option value="">Destination</option>
</select>
As mentioned above the JS could be replaced by a watcher. The important thing to note here is that I bind the data directly to the records. That avoid hassle at editData and more importantly gets rid of the problematic ng-model reference.