In my angularjs application view.html, I have following code as shown below:
<select ng-model="models.category">
<option ng-repeat="category in categories" value="{{ [category.id , category.title] }}">
</select>
When i access models.category using expression.
{{ models.category}}
The output is.
[1,"sports"]
But, all i want is to display is 1 and sports in different part of my application view.
You could do this by doing the following
{{category.id + ' ' + category.title}}
I personally think it's even better to use ng-options if you use a select because the ng-model used on the select is always a string if you use ng-repeat
<select name="mySelect" id="mySelect"
ng-options="option.title for option in categories track by option.id"
ng-model="models.category"></select>
and on another part of you application you can use the models.category.titleand models.category.id.
Related
I have an array, that consists a list of json objects as items. I am using this array as an options list for two select controls, here I want to hide first select control selected items in second select control options list.
Is it possible to do?
I don't know why are you looking for a pipe/filter solution when it can be done so easily without pipe? I may not be knowing entire scenario of yours but what you have written according to that a simple solution would be,
<select class="form-control" [(ngModel)]="selectedCity">
<option *ngFor="let ct of cities" [value]="ct.id">{{ct.name}}
</select>
// look at [disabled]="selectedCity==ct.id"
<select class="form-control" [(ngModel)]="selectedOtherCity">
<option [disabled]="selectedCity==ct.id" *ngFor="let ct of cities" [value]="ct.id">{{ct.name}}
</select>
detailed code could be found here : https://plnkr.co/edit/gkvFqtyddLVEsFOE07Ls?p=preview
In my angular script i declare the following by pulling from my viewmodel provided by my ASP.net controller:
$scope.controlleractions = #Html.Raw(Json.JsonCamelCase(Model.ControllerActions));
resulting in the following data:
[{"$id":"1",
"controller":"Resource",
"actions":["Image","File"]},
{"$id":"2",
"controller":"Home",
"actions":["Index","NotAuthorized"]},
{"$id":"3",
"controller":"Email",
"actions":["Index","Details","Adress"]},
{"$id":"4",
"controller":"Account",
"actions":["Index","Login","Logout","Create"]},
{"$id":"5",
"controller":"Archive",
"actions":["Page1","Page2","Page3","Search"]}]
I want to be able to select a controller by a select element and then select an action from the actions array with a second select element, but i can't seem to work it out. Anybody an idea?
both outputs in the ng-models are preferred to be in string
this is how far i got:
<!-- selecting a controller works fine -->
<select ng-model="selectedController">
<option value="">All</option>
<option ng-repeat="controlleraction in controlleractions">{{controlleraction.controller}}</option>
</select>
<!-- selecting an action from actions that match the selected controller dosn't work -->
<select ng-model="selectedAction">
<option value="">All</option>
<option ng-repeat="action in controlleractions.actions | filter : selectedController">{{action}}</option>
</select>
Not sure why you use filter here, but simply bind your ng-repeat on selectedController instead :
<option ng-repeat="action in selectedController.actions">{{action}}</option>
I want to add smart search to the dropdown in grails angularjs application. Does any one know how I can do that ? I get the data for the list from a table through MySQL.
I use ng-model and ng-option. I use the following code.
<select class="something" id="filter.customer.id" name="filter.customer.id"
ng-model="ctrl.customer"
ng-option="ctrl.customer"
<option value=""><{something}</option>
</select>
You can add a filter to a ng-options.
Here I created an input to search a customer ID. The data in the select will be filtered from this value.
<input type="text" ng-model="search"></input>
<select ng-model="selectedCustomer" ng-options="c as c.id for c in customers | filter: {id: search}"></select>
Check this demo application example
I have a ng-repeat iterating through an object of country names and country codes. I'm using ng-selected to preselect the USA (840) which works fine. However, when I introduce the ng-model (signup.user["country_code"]) to the select element containing the object I want to bind the selection to, the ng-select appears to be overridden by the signup.user["country_code"] property which by default is empty.
<select ng-model='signup.user["country_code"]'>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
So just for clearance the below version is successful in preselecting but is no good due to the lack of binding, the above version does bind just fine but ng-selected is overridden.
<select>
<option ng-repeat="country in signup.country" ng-selected='country["country-code"]=="840"' ng-value='{{country["country-code"]}}'>
{{country["name"]}}
</option>
</select>
Here is a snippet from my controller however I doubt it's that useful for solving this issue.
signup.user = {};
countryCodes.success(function(data) {
signup.country = data;
});
So just set country code initially in controller and use ngModel. You should also use ngOptions directive instead of ngRepeat:
signup.user = {country_code: 840};
HTML:
<select ng-model="signup.user.country_code"
ng-options="country['country-code'] as country.name for country in signup.country">
</select>
Currently I create a Handlebars template for each form and use value={{user}} in them. So I can fill any form easily for updating any entity. But select, radio and ckeckboxs are different. Is there any clean way to populate these elements too. They do not have value attributes.
<select id='select'>
<option selected value=user name=test>test</option>
</select>
as you can see, you can control the value of select by set "selected" attribute to specific options.
Or you can try embed some javascript code like
document.getElementById('select').value={{user}}
You need to make sure you have options with correct value attributes set
You can achieve this by making use of the each helper.
<select>
{{#each options}}
<option>{{this}}</option>
{{/each}}
</select>
Where options is a plain array (["apple", "banana", "pear"]).
You can find more info on the homepage. There's also an example where your array contains object, which could be useful should you need to specify value attributes.
On stackoverflow, I found this reply :
How to set selected select option in Handlebars template
With a very good solution (from #janjarfalk edited by #BlaM) :
With this partial (using Jquery) ...
window.Handlebars.registerHelper('select', function( value, options ){
var $el = $('<select />').html( options.fn(this) );
$el.find('[value="' + value + '"]').attr({'selected':'selected'});
return $el.html();
});
You can wrap selects in your Handlebars template with {{#select status}}...
<select>
{{#select status}}
<option value="Completed">Completed</option>
<option value="OverDue">OverDue</option>
<option value="SentToPayer">SentToPayer</option>
<option value="None">None</option>
{{/select}}
</select>