i want to create *ngFor binding to create another form using array and ngModel input.
So when i select the value in it, then i click the button to display new form with different value.
Any ideas how it should be worked?
I have tried this but the result is just same as the other ngModel value.
This is for Progress Tracker in my company, running on AngularJS 8 using Clarity-VMWare. I've tried using let i = index and it doesn't get the value.
HTML:
<div class="card card-report" *ngFor="let item of report">
<div class="card-block block-card">
<div class="card-title">
<div class="clr-wrapper">
<select class="clr-select-1" [(ngModel)]="selectedProjects">
<option [ngValue]="default" disabled>Project yang kamu kerjain apa?</option>
<option [ngValue]="item" *ngFor="let item of listProjects">
{{item.name}}
</option>
</select>
</div>
<div class="clr-wrapper">
<select class="clr-select-2" [(ngModel)]="selectedRoles">
<option [ngValue]="default" disabled>Kamu jadi apa di project ini?</option>
<option [ngValue]="item" *ngFor="let item of listRoles">
{{item.name}}
</option>
</select>
</div>
</div>
<div class="card-text text-card">
<p class="sub-text-card">Kamu belum melakukan apa-apa</p>
</div>
</div>
</div>
TS:
listProjects: any[]
listRoles: any[]
selectedProjects: any;
selectedRoles: any;
addReport() {
this.report.push(this.report.length)
}
The form array was working, but i want to know how the value should be different than the other select.
And the result that i hope works is :
Should be like add new form array, but the value in it can be changed.
Although what you are asking is not very clear. but a possible problem which I see is with [ngValue]. You could try using [value] instead.
<option [value]="item.name" *ngFor="let item of listProjects">
{{item.name}}
</option>
Related
I have a filter list using a select tag. I want to be able to filter the array based on the option selected. I have tried using v-model as this works with checkboxes but unfortunately doesn't work with select fields.
Any help would be amazing.
Please find my fiddle attached
<div id="app">
Selected: {{concatenated}}
<select>
<option v-for="item in vals" :select="item.selected">{{item.value}}</option>
</select>
<!--
<div v-for="item in vals">
<p>
<input type="checkbox" v-model="item.selected">{{item.value}}
</p>
</div>
-->
</div>
https://jsfiddle.net/39jb3fzw/2/
You should take a look at the docs and how they do databinding with select.
https://jsfiddle.net/s3x096u3/1/
<select v-model="selected">
<option v-for="item in vals" :value="item.value" :key="item.value">{{item.value}}</option>
</select>
With regards to your code, a select attribute on an option element doesn't do anything.
I'm not sure if this is going to make sense, I spent some time trying to research the answer I require.
I'm wanting to know if it is possible in angular to change the URL requested from a $http.get request from a value of a select box.
So I have built a simple controller which gets a JSON file and passes the response in to the scope, then I pass that data in to the view.
But I will have several JSON files which I want to load on selection of an option from a drop down and reload the data.
My Angular is fairly basic, so i'm unsure if this is at all possible to do on the fly?
var app = angular.module('serverstats', []);
app.controller('ServerController', function($scope, $http){
var apiFeed = $('.apiSelecter').val();
$http.get(apiFeed).then(function(response){
$scope.status = response.data;
$scope.server = [];
angular.forEach($scope.status.servers, function(svr) {
$scope.server.push(svr);
})
console.log('server', $scope.server);
});
});
<select class="apiSelecter">
<option value="/test.json">Data File 1</option>
<option value="/test1.json">Data File 2</option>
<option value="/test2.json">Data File 3</option>
</select>
<div ng-controller="ServerController" id="server-stats" class="server-stats">
<div ng-repeat="stat in server" class="container" ng-cloak>
<div class="stats-box col-md-2">
<p class="lead">Server Name: {{ stat.serverName }}</p>
</div>
<div class="stats-box col-md-2">
<p class="lead">Response Time: {{ stat.responseTime }}</p>
</div>
<div class="stats-box col-md-2">
<ul>
<p class="lead">Ports</p>
<li><p class="lead">{{ stat.ports.port1 }}</p></li>
<li><p class="lead">{{ stat.ports.port2 }}</p></li>
<li><p class="lead">{{ stat.ports.port3 }}</p></li>
<li><p class="lead">{{ stat.ports.port4 }}</p></li>
<li><p class="lead">{{ stat.ports.port5 }}</p></li>
</ul>
</div>
Apologies now included code
Of course you can.
HTML :
<select id="mySelect" ng-model="myValue" ng-change="myMethod()">
<option ng-repeat="o in options" value="{{o.url}}">{{o.label}}</option>
</select>
And in your controller
$scope.options = [
{url : 'www.google.com', label: 'google'},
{url : 'www.facebook.com', label:'facebook'}
]
$scope.myMethod = function() {
console.log($scope.myValue);
//HTTP Resquest here
}
The ng-change attribute will trigger when you change the selected option. The ng-model allows you to store the current value in memory.
After your HTTP request (in then .then) you can load your JSON and all the stuff you do.
NB : if your select is a Materialize one, use the angular-materialize library and use
<select id="mySelect" ng-model="myValue" ng-change="myMethod()">
<option ng-repeat="o in option" value="{{o.url}}" material-select watch>{{o.label}}</option>
</select>
So here is the deal, im getting different objects from ajax request ($scope.productos - $scope.ofertas) and then using ng-foreach for both to show them so user can select multiple items (stored in $pedidoForm.productos and
pedidoForm.ofertas) and this selected items dinamically show up below with another ng-repeat showing the 'nombre' property and adding another new property and value with input but the atribute VALUE is automatically converting any object into a string, resulting in a "{property: value}" so i cant read the property correctly
<div class="row">
<span>Productos</span>
<select class="selectpicker" ng-model="pedidoForm.productos" ng-change=parse(pedidoForm.productos) multiple>
<option ng-repeat="producto in productos" value="{{producto}}"> {{producto.nombre}}
</option>
</select>
</div>
<div class="row">
<span>Ofertas</span>
<select class="selectpicker" ng-model="pedidoForm.ofertas" ng-change="test(pedidoForm)" multiple>
<option ng-repeat="oferta in ofertas" value="{{oferta}}"> {{oferta.nombre}} </option>
</select>
</div>
as I understand you need to select an object, but HTML5 select tag supports only string values. So, try to use ng-options directive:
<div class="row">
<span>Productos</span>
<select class="selectpicker"
multiple
ng-model="pedidoForm.productos"
ng-change="parse(pedidoForm.productos)"
ng-options="producto as producto.nombre for producto in productos track by producto.nombre">
</select>
</div>
<div class="row">
<span>Ofertas</span>
<select class="selectpicker"
multiple
ng-model="pedidoForm.ofertas"
ng-change="test(pedidoForm)"
ng-options="oferta as oferta.nombre for oferta in ofertas track by oferta.nombre">
</select>
</div>
plunker: http://plnkr.co/edit/jl1cayWXif7fukQRviTw?p=preview
I have a dropdown in one of my div, from which I am selecting the number of dropdowns to be in second div. My task is to be able to select the different values from each of the dropdowns inside the second div. Here is the code I am trying
<div ng-repeat="i in getNumber(secondN2.core.r1r2.value) track by $index">
<div>
<strong><u>For Core link number {{$index+1}}:</u> </strong><br>
<strong>Select IM</strong>
<select ng-model="im" ng-change="calculate()" >
<option value="1 Gig" selected="selected">1 Gig</option>
<option value="10 Gig">10 Gig</option>
</select><br>
</div>
</div>
secondN2.core.r1r2.value is a number, I am converting it to array,a collection, by returning new Array(n), in the getNumber method
How to give the proper ng-model in this case? And how to retrieve the values?
If I try to give i.im, it still does not help. With im, $scope.im is coming undefined
Updated
What is two nested loops are there
<div ng-repeat="j in secondN3.core" style="border:1px solid;">
<strong>Configure Core Links between {{j.name}}</strong><br><br>
<div ng-repeat="i in getNumber(j.value) track by $index">
<div>
<strong><u>For Core link number {{$index+1}}:</u> </strong><br>
<strong>Select IM</strong>
<select ng-model="secondN3.coreValues[[$parent.$index,$index]]" ng-change="calculate()" >
<option value="1 Gig" selected="selected">1 Gig</option>
<option value="10 Gig">10 Gig</option>
</select><br>
</div>
</div>
<div>
Edit:2
This is working: This is the plunker for that
You could have an array in your controller that will hold the selected values:
$scope.values = [];
and then bind your dropdowns to this model:
<select ng-model="values[i]" ng-change="calculate()">
<option value="1 Gig" selected="selected">1 Gig</option>
<option value="10 Gig">10 Gig</option>
</select>
I am creating a list of <select>'s with ng-repeat, there is a item.quantity that I need to be selected in each select in the list, I have tried several ways without success. Any help would be appreciated.
<div ng-repeat="item in items">
<select ng-model="selCartQuantity">
<option index="1" ng-selected="item.quantity=='1'">1</option>
<option index="2" ng-selected="item.quantity=='2'">2</option>
<option index="3" ng-selected="item.quantity=='3'">3</option>
<option index="4" ng-selected="item.quantity=='4'">4</option>
<option index="5" ng-selected="item.quantity=='5'">5</option>
</select>
</div>
in your controller you put the following code (of course you change $scope.items to your actual object )
$scope.items = [{name:'aaaaa'},{name:'bbbbb'}];
$scope.options= [1,2,3,4,5];
$scope.items.forEach(function(item,index){
item.selCartQuantity= $scope.options[0];
});
and in the html markup you put the following
<div ng-repeat="item in items">
<select ng-model="item.selCartQuantity" ng-options="option for option in options"></select>
</div>
`
I would reccomend checking out the angular select driective, as you shouldn't have to do the ng-repeat at all. The select directive will automatically set the selected option to be what you have in your model.