In my Angular app, I have 2 select inputs as follows.
<select ng-model="selectedItem.name" ng-options="item.name for item in items" />
<select ng-model="selectedSubItem.name" ng-options="subItem.name for subItem in selectedItem" />
The options in the second select is dependent upon the option selected in the first select. Once the form is submitted, the id's from selectedItem and selctedSubItem are extracted and submitted to the API. This works perfectly for creating a new record.
While retrieving an existing record, the API returns the id's of selectedItem and selectedSubItem. I use resolve in my app.js to populate the available options in both the selects.
I'm a bit confused on how to reuse the same view to check the options in both selects based on the id's retrieved from the API in the same view.
If I understand correctly, after your route resolves on the update view you have:
selectedItem.id
selectedSubItem.id
items collection
...and each item has a nested collection of subItems.
First, you need to loop through each item in your items collection until you find the one that matches selectedItem.id. Then, you need to loop through each of that item's subItems until you find the one that matches selectedSubItem.id.
If you're using Underscore.js, the findWhere method works great for this. I'm sure lodash has something similar.
Does that answer your question?
Related
I am just trying to implement a simple drop down and here is my code
<select ng-change="selectTestSuite();" ng-model="testCase" ng-options="testSuite.TEST_NAME for testSuite in publicTestCase"></select>
In the controller when I am trying to print value of testCase in console it is giving undefined. But When I try to print id of testCase using
{{testCase.TEST_ID}}
It is giving me id. I have also checked by using $watch
$scope.$watch('testCase',function() {
console.log($scope.testCase);
});
Unable to figure out where I am making mistake.Appreciate any help.
I think no problem with ng-options.
Actually ng-options maps the "testSuite.TEST_NAME" as model to ng-model.
Ensure the "testSuite.TEST_NAME" is available in "publicTestCase" collection (Whether it is undefined).
You are binding the testCase to testSuite.TEST_NAME.
Your ng-options should look like this:
<select ng-change="selectTestSuite()" ng-model="testCase" ng-options="testSuite as testSuite.TEST_NAME for testSuite in publicTestCase"></select>
The model gets bind to the value of testSuite from the records in the publicTestCase array and for each of the testSuite you want the testSuite.TEST_NAME to be shown as the options text.
enter image description here
Note:- Please find the image link.image contains code
ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:
Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.
What I'm trying to achieve here is to remove/disable the selected role after saving my selection. PLUS, if I press the X button at the panel below to remove my list of selections, I will be able to re-populate the list with the deleted roles recovered.
Screenshot of what I'm trying to achieve:
And at the moment, this is what I have:
controller js: http://pastebin.com/LDYrJQyf
html: http://pastebin.com/39G01ARm
Instead of using the $index. why not pass the id of selectedSkills given that it is an object and has a unique id. It would automatically update the table once you push it back.
I want to select particular item in dropdownlist with angularjs i used this code but it is not working
<select class="form-control" ng-model="primaryObjectId" ng-change="getPrimaryObjectColumns()">
<option value="{{object.id}}" ng-repeat="object in objectList">{{object.name}}</option>
</select>
in controller.js
$scope.primaryObjectId = "3";
but is selecting first item in list i want to select 3rd item from list
You need to use ng-options with ng-model.
In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance, as well as providing more flexibility in how the 's model is assigned via the select as part of the comprehension expression.
<select ng-options="items for items in objectList" ng-model="primaryObjectId"></select>
See example
See this example to get items based on value of option item.
Set drop down item based on id. See example
I am working with knockout.js. I have a situation where I have a collection of items which each have a observable boolean isleader. Where one of them can be active at a time. If people swap an item in the collection with one from another collection then I check if the old one isleader is true and if so I set it on the new one. This works fine. Now I need to add a second input mechanism which is a dropdown which is bound to the collection to show all the items from the collection. I want the one item in the collection with the isleader set to true to be the selected item and if the selected item is changed I would like the isleader to be updated to reflect this.
How can I do this without creating an infinite loop between the dropdown and the collection constantly updating the selected item.
You can do a peek.
this.selectedItem.peek()
as opposed to
this.selectedItem()
as you are propably doing.
Both will return the fields value, but the first will do it without creating a dependency. In other words, peek will get the value, but it won't subscribe to it.
Currently I have a very large of data model that is presented to the user with multiple options and events.
List item as checkboxes
Update the object's datetime when checked
Add checked item data to table array
Two options to deselect items: remove button on table or uncheck input
Post update to server when item is selected or deselected
I have been unable to create the correct knockoutjs script to make all events possible.
I definitely need help.
Here is an example: http://jsfiddle.net/likwidmack/BxZGr/10/
I have refactored your code here:
http://jsfiddle.net/SKnMg/3/