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>
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 am having md-select like :
<md-select ng-model="someModel" title={{someModel}}>
<md-option ng-value="opt.id" ng-repeat="opt in neighborhoods2">{{ opt.name }}</md-option>
It shows opt.id value in title.But I have to show opt.name in title.How to add a title attribute for the selected value's name?
for that you have to select object in ng-value like
<md-select ng-model="someModel" title={{someModel.name}}>
<md-option ng-value="opt" ng-repeat="opt in neighborhoods2">{{ opt.name }}</md-option>
</md-select>
but make sure in your controller you will get an object so you have to get id as
if(angular.isString(someModel)){
var myValue= JSON.parse(someModel).id;
}
Instead of setting the value to opt.name, you could use the opt object itself as the value. That way, your md-select model will have the name and id of whatever item is selected.
Here's a codepen: https://codepen.io/standard/pen/JKKeEy
I'm using this directive to loop through some data when I create a pop so I can add the list checked to this object.
but the problem is how I can check the checkboxes that already in that object in the edit page (I use one HTML page for both create and edit):
<md-input-container ng-repeat="tab in allTabs">
<md-checkbox aria-label="tab.name" checklist-model="pop.tabs" checklist-value="tab">
{{tab.name}}
</md-checkbox>
</md-input-container>
If the existing objects are not mapping correctly - try using a 'track by' with the ng-repeat:
<md-input-container ng-repeat="tab in allTabs track by tab.Id">
<md-checkbox aria-label="tab.name" checklist-model="pop.tabs" checklist-value="tab">
{{tab.name}}
</md-checkbox>
</md-input-container>
That should work 97% of the time. If you happen to fall in the 3% and you've been pulling your hair out for the last 3 days - try adding a comparator in your controller:
$scope.compareFn = function(obj1, obj2){
return obj1.id === obj2.id;
};
And the 'checklist-comparator'
<md-input-container ng-repeat="tab in allTabs track by tab.Id">
<md-checkbox aria-label="tab.name" checklist-model="pop.tabs" checklist-value="tab" checklist-comparator="compareFn">
{{tab.name}}
</md-checkbox>
</md-input-container>
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 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.