I am trying to load a dropdown with these values and I got the values correctly from the service but when I assign a value or load a dropdown with a value for ng-model, the dropdown doesn't show the correct option.
I print the "selected" value on the screen and show the correct information, but anyway, the dropdown selection is empty.
What is the suggestion for that?
Thanks in advance
Data: Class type
selected: number
Ex. Object:
works = [
{
$type: class,
Id: 1,
Name: "Test 1",
Description: "Test 1"
},
{
$type: class,
Id: 2,
Name: "test 2",
Description: "Test 2"
}
];
ng-options structure
<button type="button"
class="btn btn-default lg"
ng-model="selected"
name=""
bs-options="item.Id as item.Name for item in vm.works"
bs-select>
I checked also bs-options="item.Name for item in vm.works track by item.Id"
Related
Full description:
I have list of options with multiple properties (not just key-value pair):
[
{
id: 1,
name: "111",
some: "qqq"
},
{
id: 2,
name: "222",
some: "www"
}
];
And select defined as:
<select name="mySelect" id="mySelect"
ng-options="option.name for option in opts track by option.id"
ng-model="mod1"></select>
Depending on app logic, extra property may change:
{
id: 2,
name: "222",
some: "www1"
}
But actual list in Select doesn't change!
However, if name changes, then entire optionList will be refreshed.
In short you can see demo on JSFiddle OR JSFiddle. I prepared 2 very similar examples:
When button is clicked only extra property updates
When button is clicked - both extra property and key receive new value
Does anybody know solution?
UPDATE
For now I'm solving that issue with update + delay + update solution:
this.click = function(){
$scope.opts = {};
$timeout(function() {
$scope.opts = { /* NEW OBJECT */};
}, 0);
}
OK, so I think I understand what you want, which is to be able to select an option whose nested values may have changed since the list was rendered in the DOM.
Based on that understanding, I believe that the plunker I have created illustrates a solution for you. If you select one of the options, and change the child value in the input field, two-way binding will update the model.
Basically, it is taking the users selection, and on select change, re-assigning the selected object to reference the original option in the options array. This will allow two-way binding to occur. If you view the code, you will see that the input fields are updating the option list itself ($scope.options), where-as the model that is being displayed is $scope.formData.model.
https://plnkr.co/edit/DLhI7t7XBw9EbIezBCjI?p=preview
HTML
<select
name="mySelect"
id="mySelect"
ng-model="formData.model"
ng-change="onChange(formData.model)"
ng-options="option.name for option in options track by option.id"></select>
SELECTED CHILD: {{formData.model.child.name}}
<hr>
<div ng-repeat="option in options">
Child Name for {{ option.name }}: <input ng-model="option.child.name">
</div>
JS
$scope.onChange = function(option) {
angular.forEach($scope.options,function(optionItem){
if (optionItem.id == option.id){
$scope.formData.model = optionItem;
}
})
}
$scope.options = [
{
id: 1,
name: "111",
child: {
id: 11,
name: "111-1"
}
},
{
id: 2,
name: "222",
child: {
id: 22,
name: "222-1"
}
}
];
$scope.formData = {
model: $scope.options[0]
};
Call $apply whenever you want to apply changes made.
$scope.$apply();
This will tell AngularJS to refresh.
Each of the character names listed has a checkbox against it.
The contents of the div updates according the text entered into the search box.
If I check "Harry" in the div, and then enter "Tom" into the search bar, "Harry" disappears from the div.
If I then erase the text ("Tom") inside the search bar, "Harry" reappears in the div. However the checkbox adjacent to it is no longer checked.
What I want instead is that the names that are checked should never disappear, irrespective of what the search text is. Also the checked entries should appear at the very top of the list in the div.
At all times, there should be a maximum of 5 entries in the div.
Can someone please advise me on how to achieve this?
app.js
$scope.characters = [
{ id: 1, name: "Dexter" },
{ id: 2, name: "Harry" },
{ id: 3, name: "Ronald" },
{ id: 4, name: "Ginny" },
{ id: 5, name: "Tom" },
{ id: 6, name: "Hermione" },
{ id: 7, name: "Severus" },
{ id: 8, name: "Marvolo" },
{ id: 9, name: "Sirius" }
];
page.html
<input type='text' ng-model='searchText' placeholder='Search'>
<div ng-repeat='char in characters | filter: searchText | limitTo: 5'>
<input type='checkbox' id='{{ char.id }}'>
<span>{{ char.name }}</span>
</div>
For keeping the state of the checkbox you need to use the ng-model directive on your checkbox input:
<input type='checkbox' ng-model="char.checked" id='{{ char.id }}'>
To have checked elements at the top add an orderBy filter to the ng-repeat. For the filtering you can write your own filter (I put it inside the controller, but you can of course add it as a proper filter, too):
HTML
<div ng-repeat="char in characters |
filter: showCharacter |
orderBy: 'checked' |
limitTo: 5">
JS (in your controller)
$scope.showCharacter = function(character) {
if (character.checked) {
return true; // Keep element if it is checked
}
if (_.startsWith(character.name, $scope.searchText)) {
return true; // Keep element if it matches search text
} else {
return false; // Remove element otherwise
}
};
Note: I used lodash's _.startsWith function for simplicity, you can obviously replace this with any other method for checking if your search text matches the name of the character.
You can see the whole thing in action in this JSBin.
I created the following with the plugin: http://vitalets.github.io/checklist-model/
<section ng-repeat="owner in lord.owners">
<form ng-submit="foobar(owner)" name="update_location_form">
<input type="text" ng-model="owner.name">
<ul>
<li ng-repeat="sheep in sheeps">
<input checklist-model="owner.sheeps" checklist-value="sheep.id" type="checkbox">
<label class="checkbox">{{ sheep.name }}</label>
</li>
</ul>
<button type="submit">Submit</button>
</form>
</section>
All sheeps are shown in the list. And saving to my pivot table (manytomany-relation) also works.
But when I refresh the page, all checks are gone of course. How can I access them?
They're stored in:
{
id: 1,
name: "Obama",
farms: [
{
id: 10,
name: "VirtualFarm",
sheeps: [
{
id: 1,
name: "Foo",
},
{
id: 2,
name: "Bar",
},
{
id: 10,
name: "Cow",
},
{
id: 13,
name: "Hey",
},
]
}
]
}
But I really have now clue how I can check the checkboxes by default that are in the Pivot table.
Someone?
The checklist-model directive automatically checks the appropriate checkboxes based on the value of the checklist-model. You don't have to do anything else, your code looks fine. But ...
First of all, I suspect that owner in lord.owners must be something like owner in x.farms where x is the object that you pasted above.
And this is on the client side and even though you check this boxes, you still need to save them on the server-side. On a refresh, every data not persisted on the server side is lost.
I need to pre-select a specfic element in a Select tag.
My model is this:
{
user: 'mjones',
idprofile: 2,
profiles: [
{idprofile: 1, profile: 'admin'},
{idprofile: 2, profile: 'read-write'},
{idprofile: 3, profile: 'read-only'},
]
}
This represents a "user", and I attached a list of profiles to it, before opening a form with user-data, containing a select, for choosing the appropriate profile.
As you can see, the user object doesn't contain a "profile" object, but just it's idprofile. That's the difference between my object and those published in ngSelect documentation.
My view contains the select element as this:
<select class="form-control"
ng-model="user"
ng-options="profile.idprofile for profile in user.profiles">
</select>
This populates the list as expected, but it does not selects the idprofile: 2.
How can I match the idprofile from the user object with one element in the profiles array?, I prefer to work only on the view.
Your ng-model must be set to user.idprofile and not to the user.
<select class="form-control"
ng-init="user = user || profile[0]"
ng-model="user.idprofile"
ng-options="item.idprofile as item.profile for item in user.profiles">
</select>
the ng-options pattern is "select as label for value in array" (https://docs.angularjs.org/api/ng/directive/select)
The code would be easier to read with a few renames:
{
user: 'mjones',
idprofile: 2,
profiles: [
{id: 1, name: 'admin'},
{id: 2, name: 'read-write'},
{id: 3, name: 'read-only'},
]
}
<select class="form-control"
ng-init="user = user || profile[0]"
ng-model="user.idprofile"
ng-options="profile.id as profile.name for profile in user.profiles">
</select>
I have an ngRepeat that populates a list of customers, shown here :
<div ng-repeat="terr in terrData.data">
<div class="customer-row" ng-click="clickCustomerSelect(terr)">
<input class="customer-radio" type="radio" name="customer-select" ng-model="selectedCustomerRow" value="{{terr.customerID}}">
<div class="contact-data-column">{{terr.custNm}}</div>
<div class="primaryphone-data-column">{{terr.primaryPhone}}</div>
<!-- other customer data -->
</div>
</div>
There is a click event on the customer-row div that says if the row is clicked, the radio button for the row should be checked.
The basic controller logic shown here :
$scope.clickCustomerSelect = function(customer){
$scope.selectedCustomerRow = customer.customerID.toString();
//Other business logic
};
I see that whenever the customer row is clicked (not the radio button), the model gets properly updated, and the radio button corresponding to that value is checked. Note that this is expected functionality.
The issue i'm seeing is that if you check the radio button manually (i.e. not clicking the row), the model will no longer respond to updates from clicking the row.
I'm wondering if somehow once you select the radio button you're going outside of angular scope?
EDIT: Sample model
terrData.data = [{
"customerID": 1,
"companyName": "Name 1",
"custNm": "Blank",
"primaryPhone": "111-111-1111"
}, {
"customerID": 2,
"companyName": "Name 2",
"custNm": "Blank",
"primaryPhone": "111-111-1112"
}, {
"customerID": 3,
"companyName": "Name 3",
"primaryPhone": "111-111-1113"
}];
$scope.selectedCustomerRow = customer.customerID.toString();
Replace To:
$scope.selectedCustomerRow = customer.customerID;
onclick with it set selectedCustomerRow.
in HTML
<input class="customer-radio" type="radio" name="customer-select" ng-model="selectedCustomerRow" value="{{terr.customerID}}">
Replace To:
<input class="customer-radio" type="radio" name="customer-select" ng-model="$parent.selectedCustomerRow" value="{{terr.customerID}}">
DEMO
Likely your problem is this: https://stackoverflow.com/a/17607794/170407
Short answer: ng-model almost always needs a dot in it.