I'm trying to implement md-virtual-repeat for md-select which has more than 2000 items to select. This not working with the md-option.
<md-input-container>
<md-select ng-model="break.start_time" md-on-open="vm.mdSelectOnOpen()">
<md-virtual-repeat-container id="vertical-container">
<md-option md-virtual-repeat="option in vm.time" value="option.value" >{{option.text}}</md-option>
</md-virtual-repeat-container>
</md-select>
</md-input-container>
What is the problem with this? I have updated a plunker with my problem. see
Updated Answer
Since you are using md-virtual select the check boxes you can refer the below codepen, there was no need to add a check box itself since md-select has an attribute called multiple which will add the check boxes
Code
<md-input-container>
<label>Select an option</label>
<md-select ng-model="selectedOption" md-on-open="mdSelectOnOpen()" multiple>
<md-virtual-repeat-container id="vertical-container">
<md-option md-virtual-repeat="option in options" ng-value="option" ng-selected="selectedOption.indexOf(option) > -1">{{option}}</md-option>
</md-virtual-repeat-container>
</md-select>
</md-input-container>
Codepen: here
Old Answer
You need to give ng-selected option and ng-value.
<md-input-container>
<md-select ng-model="break.start_time" md-on-open="vm.mdSelectOnOpen()">
<md-virtual-repeat-container id="vertical-container">
<md-option md-virtual-repeat="option in vm.time" ng-value="option.value" ng-selected="break.start_time==option.value">{{option.text}}</md-option>
</md-virtual-repeat-container>
</md-select>
</md-input-container>
Refer: codepen
I know this is an old thread, but maybe this can help to someone.
If the following did not work
$scope.$broadcast("$md-resize")
use this instead:
angular.element(window).triggerHandler('resize')
Related
I have a simple md-select component. I want to set the value of number.number on the vm.telephonyInfo.phone.number property in the controller.
<md-input-container>
<md-select ng-model="vm.telephonyInfo.phone.number" placeholder="Selecteer een nummer" required>
<md-option ng-repeat="number in vm.phonenumbers"
ng-value="{{number.number}}" ng-click="vm.login()">{{number.number}}</md-option>
</md-select>
</md-input-container>
When I select a option I log the login() function but the property this.telephonyInfo.phone.number always is null.
Is my data-binding wrong? I thought I had to put the ng-value in the md-option and the ng-model in the md-select.
Use the ng-change directive instead of ng-click:
<md-input-container>
<md-select ng-model="vm.telephonyInfo.phone.number"
ng-change="vm.login()"
placeholder="Selecteer een nummer" required>
<md-option ng-repeat="number in vm.phonenumbers"
̶n̶g̶-̶v̶a̶l̶u̶e̶=̶"̶{̶{̶n̶u̶m̶b̶e̶r̶.̶n̶u̶m̶b̶e̶r̶}̶}̶"̶
ng-value="number.number"
̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶v̶m̶.̶l̶o̶g̶i̶n̶(̶)̶"̶ >{{number.number}}</md-option>
</md-select>
</md-input-container>
Also avoid using double curly {{ }} interpolation in ng-value directives. See AngularJS Developer Guide - Why mixing interpolation and expressions is bad practice.
I have the code in angular which is
<md-input-container>
<label>Country </label>
<md-select name="country" ng-model="country"required >
<md-optgroup label="Select Country">
<md-option ng-repeat="item in countryList" ng-value="item" >
{{item.countryName}}
</md-option>
</md-optgroup>
</md-select>
</md-input-container>
and in have used the code in Protractor as following
element(by.model("country")).click();
browser.sleep(2000);
element.all(by.repeater("item in countryList").row('1')).click();
and I am always getting the game error as
Failed: element not visible
in the code the element(by.model("country")).click() is working fine but not selecting the md-option in popup window
please help.
Try with below code (You should get 1st element selected.
element(by.model("country")).click();
browser.sleep(2000);
element.all(by.repeater("item in countryList").get(1)).click();
If still facing issue You can try to scroll till that element.
element(by.model("country")).click();
browser.sleep(2000);
var elementToSelect = element.all(by.repeater("item in countryList").get(1));
browser.executeScript('arguments[0].scrollIntoView(true)',elementToSelect.getWebElement());
elementToSelect.click();
So I have the following:
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Documents</label>
<md-select multiple ng-model="ctrl.data.documents" placeholder="Documents" ng-controller="DocumentsCtrl"> // I want to show the submitted values.
<md-option ng-value="doc" ng-repeat="doc in allItems">{{ doc.name }}</md-option> // A list of other values
<div ng-hide="allItems.length">No items found</div>
</md-select>
</md-input-container>
</div>
ctrl.data.documents is an array of already selected values.
What I am trying to achieve is to present this array (ctrl.data.documents) in the field options and a list with the other values which is the ng-repeat in this case. The ng-repeat works just fine. I am able to select other values. But can't figure out how to show the already selected values.
Did some digging I thought ng-options might do it, but can't seem to get it working (not supported ??) and ng-selected did not do the trick as well.
Any help or ideas?
Update #1:
Added a picture of the ctr.data.documents array.
You have to use ng-model-options="{trackBy: '$value.id'}" and ng-repeat="doc in allItems track by doc.id". The id part should be your identifying marker of your document.
<md-select multiple ng-model="ctrl.data.documents"
ng-model-options="{trackBy: '$value.id'}"
placeholder="Documents" ng-controller="DocumentsCtrl">
<md-option ng-value="doc" ng-repeat="doc in allItems track by doc.id">{{ doc.name }}</md-option>
<div ng-hide="allItems.length">No items found</div>
</md-select>
Most of this is documented here: https://material.angularjs.org/latest/api/directive/mdSelect
I am using Angular Material to make my new web app, I want to get the selected value from an <md-select> and the problem is that I am new to angularjs and how it works. If anyone could help me, it would be really appreciated.
HTML :
<md-input-container>
<label>Rating</label>
<md-select ng-model="userRating">
<md-option><em>None</em>
</md-option>
<md-option ng-repeat="rate in ratings" ng-value="rate.abbrev">
{{rate.abbrev}}
</md-option>
</md-select>
</md-input-container>
You can just get the value by using the $scope variable
In controller
console.log($scope.userRating);
Inorder to get the selected value on change , you can pass the selected to a function and display,
<md-select ng-change="Print()" class="inline-flex md-select-down" placeholder="Select" ng-model="model">
<md-option ng-repeat="item in ratings" value="{{item.value}}">
{{item.abbrev}}
</md-option>
</md-select>
Controller:
$scope.Print = function(){
alert($scope.model);
}
DEMO
In Angular 1.5, I have the following setup:
<form name="linksForm">
<md-input-container>
<label>Region</label>
<md-select ng-model="$ctrl.user.region">
<md-option ng-repeat="region in $ctrl.allRegions" value="{{region.id}}" ng-bind="region.name"></md-option>
</md-select>
</md-input-container>
<md-input-container ng-if="$ctrl.user.region">
<label>Territory</label>
<md-select ng-model="$ctrl.user.territory" name="territory" required>
<md-option ng-repeat="territory in $ctrl.getTerritories($ctrl.user.region)" value="{{territory.id}}" ng-bind="territory.name"></md-option>
</md-select>
</md-input-container>
<md-input-container ng-if="linksForm.territory.$valid">
<label>House</label>
<md-select ng-model="$ctrl.user.house">
<md-option ng-repeat="house in $ctrl.allHouses" value="{{house.id}}" ng-bind="house.name"></md-option>
</md-select>
</md-input-container>
</form>
Here is the logic:
At first, only the regions list is visible.
When a region is selected, the territory list appears with a list of territories from the selected region.
When a territory is selected, the house list appears.
So far, so good. The thing works. The only problem is when I change the region, here is what happens:
The territory list changes, and since ngModel cannot match any of the new options, the territory selector is now unset. This is working as expected, but...
The house list does not disappear, despite the territory selector being required, therefore the territory field should be invalid.