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.
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 different <select> in a ng-repeat div.
What I want is to avoid users select several times a same option.
I used the filter like this :
<div ng-repeat="customer in datas.customers">
<select ng-model="customer.attributeId" ng-change="updateCustomer(customer)">
<option ng-repeat="attribute in datas.attributes | filter:filterByAttributeNotUsed(customer)" value="{{attribute.id}}">{{attribute.name}}</option>
</select>
</div>
The filter works like I want (I tested it separately). But the result is not good.
When the filter is active, options in different select have to show only "free" attributes (it means, attributes which are not yet selected).
Here is a Demo which is more explicit I suppose.
In the form I have a drop down list with multiple choice, as shown below. Elements are loaded from the database.
<label>Items</label>
<select class="form-control m-b"
ng-model="model.livingComplexId"
x-ng-change="updateOne(model.livingComplexId)">
<option></option>
<option ng-repeat="itemOne in itemsForAddrLevelOne"
value="{{itemOne.id}}">{{itemOne.tobName}}</option>
</select>
I make choose.
For example, I choose an item2.
Then save data. Then, I open the form to edit and I want to see an item that I chose, but the list is empty...
How can I set the previously selected value?
I would recommend to use the ngOptions directive to generate the select menu options:
<select ng-model="model.livingComplexId" ng-options="itemOne.id as itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
Maybe you could additionally change the ng-model value to model and use ng-options="itemOne as ..." (without the .id) and add an track by itemOne.id.
<select ng-model="yourModel" ng-options="itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
In the js you should set $scope.yourModel = itemsForAddrLevelOne[0];
In Angular, I want what displays in the select to be a combination of two properties from the object in the array. For example, I have auctionName and auctionLocation on the item and I want the text in the display to appear like auctionLocation-auctionName.
<select ng-model="selectedAuction" ng-options="item.auctionLocation as item.auctionLocation for item in auctions">
<option value="" disabled selected>All Auctions</option>
</select>
values can be concatenated inside ng-options.
For your case you can use:
ng-options="item.auctionLocation as item.auctionName+'-'+item.auctionLocation for item in auctions"
Demo: http://plnkr.co/edit/uqoe0Hx4f0mOlU1f1wRE?p=preview
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.