I need to use angular-chosen to customize a drop-down of groups for a project. I use resource to share the data between the controllers. I am able to extract the group list to
$scope.allgroups of my controller. The console.log shows me this image :
In my html, I do call the select in the following way but It always shows "No Group Found.." even with matching characters.
<select
chosen multiple style="width:150px;" id="newusergroups"
class="groupselect" title="Groups"
allow-single-deselect="true"
data-placeholder="Select Group.."
no-result-text="No Such Group.."
ng-model="selectedgroup"
ng-options="pergroup.name for pergroup in allgroups">
<option value=""></option>
</select>
Anywhere I am wrong? Please help.
If the screenshot shows the console.log of allgroups, then your ng-options should be ng-options="pergroup.name for pergroup in allgroups.result", OR allgroups = $myResource.result.
Related
I'm using two controllers here. One, productComponentsController, handles a call to our database that pulls back an array of productComponent objects. The other, AddEditArticleController, controls the 'Create New / Edit Existing Article' page.
On my Add/Edit Article page, I want a <select> to populate with productComponents, and, if I am editing an existing Article, to be pre-selected with that Article's current productComponent.
Simple as this seems, I cannot make the field pre-select with the existing productComponent, though it does populate the <select> with them correctly. I've tried ngRepeat and ngOptions and both work for populating the dropdown, but neither works for pre-selecting the existing productComponentID from the array returned by the server.
My HTML, using ngOptions:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md"
ng-options="component.name for component in pvm.productComponents track by component.id"></select>
My HTML, using ngRepeat:
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
ng-model="vm.selectedComponent"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
class="form-control input-md">
<option value="{{component.id}}"
ng-repeat="component in pvm.productComponents"
ng-selected="vm.selectOption(component.id)"
ng-bind-html="component.name"></option>
</select>
<!-- vm.selectOption() returns true if the current option's ID equals the productComponentID of the current Article. Therefore this option would be selected. -->
In my AddEditArticleController, I set vm.selectedComponent equal to the productComponentID of the Article that was returned by the database, in the promise.then() of my call. While vm.selectedComponent does change, this doesn't do anything to the dropdown.
Also, in my generated HTML, I get the option: <option value="? number:47 ?"></option> (for an Article where the productComponentID is = 47). Apparently this happens as a result of the model being set to an unknown value but I don't know why the model would be set to anything other than an integer id.
Is this because my select is accessing multiple controllers, or am I missing something obvious here? Any help is greatly appreciated, let me know if more info is needed.
I believe you're looking for ng-init...
<!-- productComponentsController as pvm, AddEditArticleController as vm -->
<select id="componentBox"
class="form-control input-md"
placeholder="Select a Product Component"
ng-change="vm.changeProductID()"
ng-model="vm.selectedComponent"
ng-init="vm.selectedComponent=productComponentID"
ng-options="component as component.name for component in pvm.productComponents track by component.id"></select>
So it turns out that because the model has to be a string, I have to cast the vm.selectedOption to a string whenever it's changed (in this case, in the vm.selectOption function) using String(). This is using ngRepeat. ngInit seems to have no bearing on how my code works.
Boom, that's it, and my code works.
I have a form where I have to enter a country from a list in order to add different shipping costs to a total. As I am using ngCart directive, I have to use ng-click in order to send that info to the directive.
The problem is that I have two different input options with the same fields in different parts of the form, and I would like to update the value of one when I manually change the other, so that displayed option is always the same in both inputs.
I attach a http://jsfiddle.net/nf2z1a00/ with my code. Thanks in advance!
You can use ng-model on the select and use ng-options to take care of the options and the shipping like this:
<select ng-model="selectedCountry" ng-options="country.name for country in countries" ng-change="changeChipping()">
</select>
I've update your fiddle here
Put same ng-model in you similar select boxes :
<select ng-model="shippingCountry">
//first
</select>
<select ng-model="shippingCountry">
//second : notice the same ng-model
</select>
I'm using Angular $resource and having a simple form with some inputs and a multiple select, for example:
<select ng-model="item.selectedItems" multiple>
<option value="bla">Bla</option>
<option value="bla2">Bla2</option>
</select>
Now when I selected all the items in the multiple select and do item.$save in my code on submit, the url called is
http://domain.com/api/items?field1=text&selectedItems=bla&selectedItems=bla2
However, I want this url to be
http://domain.com/api/items?field1=text&selectedItems[]=bla&selectedItems[]=bla2
just like I was having with a regular
<select name="selectedItems[]">
Does anyone know how to do this? Using ng-model="item.selectedItems[]" didn't work.
I'm using Slim Framework as backend and it just replaces the selectedItems parameter with the last in the url.
Im creating angularJS app with a list of items. I've implemented filtering of the list successfully, but I can't find out the way how to apply it by default. What I mean is that I want to display filtered list by default and users to be able to see the full list if they want.
I've tried selecting option by default but this doesn't trigger filtering at all despite it is selected.
my filter looks like this:
<select ng-model="query.status" ng-click="setItems()" class="form-control">
<option value="">All tasks</option>
<option value="0" ng-selected="true" selected="selected">Todo</option>
<option value="1">Done</option>
</select>
setItems() Function is used for pagination only so it doesn't have any affect on filtering itself
is query.status responsible of filtering your list ?
In that case init it to the value you want the list to be filtered by.
I'm trying to display different server's id in a custom selectpicker. The selectpicker works fine if the options tag are "hard coded" but not when I try to retrieve them from a json file (the json is good since the same works with a table in the same page).
Working:
<select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">
<option>cow</option>
<option>bull</option>
<option class="get-class" disabled>ox</option>
</select>
Not working:
<select ...ng-model="selected" ng-options="project.idproject as project.idserver for project in projects">
<option value="">-- YON --</option>
</select>
The weird thing is that for each hard-coded option in the second case (like "--YON--" here), when I click it, the server's id corresponding (meaning, if I have two options, the second server id in my json is corresponding to the second option) is displayed in the select!
I tried quite every syntax I have seen on the web but still not working...
Someone has an idea?
I've made a simple plnkr for you http://plnkr.co/edit/2SbSwL05nx5Ta8KevEDC?p=preview
that is working, can you maybe post a sample of that JSON is it object of objects or array of objects?