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
Related
div class="list-group" ng-repeat="(key, ListPieces) in Pieces | groupBy: 'name'">
<div class="list-group-item">
<div class="list-group-item-text" ng-repeat="Piece in ListPieces">
<md-select ng-model="Piece.SelectedPiece" placeholder="#Resources.Global.SelectRef" ng-required="Piece.IsSelected" md-on-open="TooglePiece(Piece.DropDownOpen, $index)" md-on-close="TooglePiece(Piece.DropDownOpen, $index)">
<md-option md-option-empty ng-value="{{null}}">
#Resources.Global.RemoveCondition
</md-option>
<md-option ng-repeat="opt in Piece.tblRefs" ng-value="opt">
<span ng-show="Piece.DropDownOpen === false">{{opt.Reference}}</span>
<span ng-show="Piece.DropDownOpen === true">{{opt.Description}}</span>
</md-option>
</md-select>
</div>
</div>
</div>
And my js:
$scope.TooglePiece = function (Piece, i) {
$scope.Pieces[i].DropDownOpen = !Piece;
};
So, I've this select, that I want to show just a number, the piece number, and when I open the select it will show all options, but the text of it will be more detailed it will say the Description (piece number + piece name + piece price basically) and after I chose the select options it will show only the number of that selected one.
What it happens now is that the default value is ok, I open and it appears all ok but after I choose it doesnt update the value to just the number and it will appear still the Description instead of the Reference.
How can I solve this? Any idea?
PS: I'm using AngularJS v1.6.10
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')
I have a form with some md-select dropdowns which im trying to bind with a scope object in my angular controller.
The html looks like that :
<div id="horizontal_form_category" class="row">
<div class="col-md-2 col-lg-2" data-ng-repeat="r in categories[general]" dir="rtl">
<md-input-container>
<label> {{ r.name }} </label>
<md-select ng-model="formObject[r.name]" class="md-no-underline">
<md-option ng-repeat="option in r.values" ng-value="option "> {{ option }} </md-option>
</md-select>
</md-input-container>
</div>
</div>
The controller has a definition of the object $scope.formObject = {}; (Although it should work without it)
But, unfortunately, the $scope.formObject object in my controller stays empty.
Any ideas what could cause such weird behavior ? I have some normal bootstrap components whom ng-model is written the same and are working just fine.
Thanks
Does this help in any way? - CodePen
The true as the last parameter for $watch checks for changes in the object formObject.
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<md-input-container>
<label> Options </label>
<md-select ng-model="formObject['Options']" class="md-no-underline">
<md-option ng-repeat="option in options" ng-value="option "> {{ option }} </md-option>
</md-select>
</md-input-container>
</div>
JS
angular.module('MyApp',['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.options = ["Earth", "Saturn", "Jupiter"];
$scope.$watch("formObject", function () {
console.log($scope.formObject);
}, true)
});
Apparently there wasnt any bug.
My form's md-select were empty and therefore the formObject was empty.
The minute I started puting values, the formObject got filled, one field at a time, containing only the fields that were set.
I added a default value and everything is now showing correctly, just to be sure this was the "bug".
In retrospect, this bevahiour actually saves me some lines of code so I adopted it :)
Gotta thank #camden_kid answer for the $watch tip, helped me figure it out in matter of seconds.
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.
I have two ng-repeat sections in my HTML as below:
<md-card ng-repeat="location in global.locations | limitTo: 1 ">
<md-select name="location_id" ng-model="location" ng-change="getSingleLocations(location)">
<md-option ng-repeat="location in global.locations" ng-value="location.slug">
{{ location.location_name }}
</md-option>
</md-select>
</md-card>
When I change inner repeat then outer repeat content should be change as per the selected one.
I think without a plunkr you won't get a solution. But in the code here I see a few problems, first of all, first ng-repeat uses location as the iteration item name, and second one uses exactly the same name - this is wrong, the second should use its own name.
Second issue - the ng-model of the second ng-repeat uses again the same variable name - this will contain the selected value so it has to be a different object - I would call it selectedLocation.
Third thing which I don't really get is why you need the first ng-repeat - the nice part about angularjs is data binding, and once you have the ng-model populated by angular, you can use that one for the md-card something like this:
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">{{selectedLocation.slug}}</span>
</md-card-title-text>
</md-card-title>
<md-select ng-model="selectedLocation">
<md-option ng-repeat="location in global.locations track by $index" value="{{location.slug}}">
{{ location.location_name }}
</md-option>
</md-select>
</md-card>