Develop Reference

Getting the selected string in the dropdown list in Angular

To begin with, I am an absolute beginner in front-end development, thus please excuse me if the question is too elementary.
The project I am working on, a drop-down list has been defined as:
<div ng-controller="FacetController">
<div class="spnlocationdrop-container" ng-hide="isservicelocal">
<select class="spnlocationdrop" ng-model="$parent.locationsearch" ng-options="location for location in locations | sortArray ">
<option value="">All Cities</option>
</select>
</div>
</div>
The list contains cities, out-of which the user has to select one. The value has to be stored, and sent to the backend via an AJAX call.
How do I get the selected value? Until now, I've been doing that using the document.getElementByID().value() function, but since the above list contains no ID, how do I get the value?

ng-model will have the value of the option selected.
Here's a simple working example: Plunker
In my example, data.singleSelect has the value you need so I'm able to output that to the view using {{ data.singleSelect }} though if I wanted to access it in my controller I would do var input = $scope.data.singleSelect and then pass that input variable to the backend via an AJAX call.

Angular 2 - trackBy function, what does it really do?

I was under the impression that trackBy function is used only when trying to optimize the performance of *ngFor, so that if something changes, the DOM doesn't have to be rebuild.
However, recently, I came across a situation when trackBy actually fixed a wrong behavior.
Take this for example: https://plnkr.co/edit/nRgdwoiKAMpsbmWaoMoj?p=preview
Focus on Hobbies section, especially HTML:
<div>
<h2>Hobbies</h2>
<div *ngFor="let h of user.hobbies; trackBy:customTrackBy; let i = index">
#{{i}} - {{h | json}}<br />
<input [(ngModel)]="h.name" name="hobby_name_{{i}}" /> <br /><br />
<select [(ngModel)]="h.type_id" name="type_{{i}}">
<option *ngFor="let t of types" [value]="t.id">{{t.type}}</option>
</select>
<br />
<br />
<button class="btn btn-warn" (click)="remove(i)">Remove</button>
<br /><br />
</div>
</div>
I had to explicitly define this part: trackBy:customTrackBy in the first *ngFor. If trackBy is removed, and the following steps are performed:
remove the first item
add a new item
In this case, the inputs of the first item get replaced with the content of the second item (both fields have the same content), however, the values in the model are correct.
trackBy solves this issue, but why?
I would really appreciate any kind of explanation. If this is not the right place to ask this kind of questions please redirect me to the correct one. Thanks.
update
Here's an example of the wrong behavior: https://plnkr.co/edit/u8YajKfHcPiVqY0WcJt7?p=preview remove the first item (cycling) and add a new item (add button) and see how both values get the same default value (BF will get replaced by "default value" even though the model stays correct).

*ngFor by default tracks items by object identity.
If you have primitive values like an array of strings, and use them in
<div *ngFor="let item of items; let i=index">
<input [(ngModel)]="item" name="item{{i}}">
</div>
and you edit one item, then *ngFor gets in trouble, because the identity of the edited item has changed.
With ngForTrackBy you can tell *ngFor to track the item by index, then above code will work fine when you edit fields.
Another use case is when you want *ngFor to track items by some custom object id property instead of the object identity.

Ember.js input checkbox in table

I have lots of models and show them in tables. When user needs to do something with several models, we need to give him ability to choose rows.
How can I implement it with checkboxes? Of course I don't want to create special field on my models for every table.
This is simple example.
https://ember-twiddle.com/0b8f429f6ad3e0572438
My tries were:
{{input type='checkbox' checked=model.someNotExistedField}}
But in this case input just doesnt work.
And:
<input type="checkbox" {{action marked model}} checked={{in-arr record selectedItems}} />
In second example I've tried to keep selected ids in an array on context. But id doesnt work too.

There are a few steps to solving this problem, which you have not shown in your code examples.
you dont need to worry about binding a checked value on the checkbox.. it can manage its own internal state, and you can take advantage of it when selecting an item... a native <input> should be fine
<input type="checkbox">
You will need an action (preferably a closure action) that handles what to do when a record is selected
onchange={{action (action "valueHasChanged" item) value="target.checked"}}
You will need an array to store the "selected items"
this.selectedItems = [];
I put together a twiddle as one example of how these pieces fit together.
(This answer should be valid with ember version 1.13.0 and up)

I'am guessing your model is an array of rows.
So try adding a chked (boolean) property to the model structure so you now have one for each row and bind it to the respective checkbox.

I finished with such technic:
components/action-based-checkbox.hbs
{{#if checked}}
<input type="checkbox" {{action changed}} checked="checked" />
{{else}}
<input type="checkbox" {{action changed}} />
{{/if}}
In context we have array with selected items, for instance "selectedItems"
In context we have an action, that manages array
//2 and 3 steps example
actions:{
marked(id){
this.selectedItems.push(id);
var uniq = this.selectedItems.uniq();
this.set('selectedItems', uniq);
},
selectedItems:[],
4.next I put the component to my cell
{{inputs/action-based-checkbox changed=(action marked record.id) checked=(in-arr record.id selectedItems)}}
in-arr my "in_array?" helper, ember 2.3

How do I data-bind a javascript array to a list in pure JS without using AngularJS ng-repeat?

I have a Javascript Object Array, keeping it simple lets say an Array of FilterOptions. Each filter has its own set of values, together with a Name value. I want to beable to Load this into a html list together with Delete and Add functionality.
I know in AngularJS if I wanted to do this I could type out a Simplified:
<input ng-click="Create_New_FilterOption()" />
<div ng-repeat="filterOption in filterOptions">
<div>
Name: {{filterOption.Name}}
Age: {{filterOption.Age}}
..... LOADS OF OTHER VALUES WHICH ARE IN JSON FORMAT AND NOT CHANGED......
<input ng-click="DoSomething()" />
<input ng-click="Delete_FilterOption(filterOption)" />
</div>
</div>
But how would I do this without using AngularJS and just using pure Javascript?
I was thinking about assigning each DIV an id on load say
id="filter-option-[ArrayPos]"
However removing filterOptions would mess up the ordering system(the filter-option-[ArrayPos] ids) and then adding a new elements would further mess up the existing filter-option-[ArrayPos] ids. Also relying on the elementID to provide its position in the FilterOptions[] just seems wrong.
Is there any other way I can bind the Javascript object array to the elements?

Setting ng-model value dynamically to the value of js variable in AngularJS

Similar questions have bee asked before and I have tried solutions given to them, but my problem is little different.
Lets say I have an array of objects like this in my controller
$scope.objArray = [
{
id:1,
name:"placeholder1"
},
{
id:2,
name:"placeholder2"
}
];
now based on this array I am generating a form dynamically like this
<div ng-repeat="field in fields">
{{field.field_name}} </br>
<input type="text" ng-model="field.field_name"><br>
</div>
here in this form i want ng-model value to be set as placeholder1 and placeholder2 and not like javascript variable like field.field_name because my targets are coming from another source which contains html like below.
<p>this is sample html {{placeholder1}}. again sample html {{placeholder2}} </p>
i don't have those JS variables in here. I could not find any solution which will work this way for me so far.
here is link to plunk:
http://plnkr.co/edit/ttaq0l3PDRu4piwSluUX?p=preview

In your case it will look like this:
<div ng-repeat="field in fields">
{{field.field_name}}
<br>
<input type="text" ng-model="$parent[field.field_name]">
<br>
</div>
Note, that you have to use $parent reference because in your case you want to set property of the outer scope (where objArray is defined), however ngRepeat creates child scopes per iteration, so you need one step up.
Demo: http://plnkr.co/edit/35hEihmxTdUs6IofHJHn?p=info