I have a select that should track a myCoef as a float value(not an object, but a float value).
I have the following code (CodePen HERE):
function theController($scope) {
$scope.coefs = [
{name:'mm', val:1/1000},
{name:'cm', val:1/100},
{name:'m', val:1}
];
$scope.myCoef = 1/100;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<body ng-app>
<div ng-controller="theController">
<select ng-model="myCoef"
ng-options="coef.name for coef in coefs track by coef.val">
</select>{{myCoef}}
</div>
</body>
How do I correctly initialise my select, in order to keep a float value in myCoef?
Use As syntax and remove track by.
PS : If someone knows why i have to remove track by he can edit my answer because i don't really know why.
function theController($scope) {
$scope.coefs = [
{name:'mm', val:1/1000},
{name:'cm', val:1/100},
{name:'m', val:1}
];
$scope.myCoef = 1/100;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<body ng-app>
<div ng-controller="theController">
<select ng-model="myCoef"
ng-options="coef.val as coef.name for coef in coefs">
</select>{{myCoef}}
</div>
</body>
A little strange syntax. Following the Walfrat answer, examples how to init by val, or by name the initial value (without passing via $scope.myCoef = $scope.coefs[1] syntax)
function theController($scope) {
$scope.coefs = [
{name:'mm', val:1/1000},
{name:'cm', val:1/100},
{name: 'm', val:1}
];
$scope.myCoefVal = 1/1000;
$scope.myCoefName = 'cm';
}
<body ng-app>
<div ng-controller="theController">
Init by value - myCoefVal=1/100 <br>
<select ng-model="myCoefVal"
ng-options="coef.val as coef.name for coef in coefs">
</select><br>
now myCoefVal={{myCoefVal}}
<br/><br/>
Init by name - myCoefName='cm'<br>
<select ng-model="myCoefName"
ng-options="coef.name as coef.name for coef in coefs">
</select><br>
now myCoefName='{{myCoefName}}'
</div>
</body>
Related
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.margins{
margin-right:8px;
margin-bottom: 5px;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<h2>LogValues</h2>
<div class="logval" ng-repeat="num in loop">
<select class="margins" ng-change=populate() class="custom-select"
id="inputGroupSelect01" ng-model="logType"
ng-options="x.type for x in logValues[0].parameters">
<option value="" disabled selected>Select Log Values</option>
</select>
<select class="margins" ng-model="logVal"
ng-options="y.val for y in statistics">
<option value="" disabled selected>Select Statistic</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.loop = [1,2,3,4];
$scope.logValues =
[
{
"name" : "Log Values",
"parameters" :
[
{"type":"Depth Curve"},{"type":"Conductivity Attenuation -Corr- 400kHz BHI_LWD"},{"type":"Conductivity [CACLMED]"},{"type":"DeepResistivity[RACLMED]"},
{"type":"DeltaTCompressionalBHI_LWD"},{"type":"Sonic Compressional [DTCED]"},{"type":"Gamma Ray - Apparent BHI_LWD"},{"type":"Gamma Ray [GRAMED]"},
{"type":"Medium Resistivity [RPCLMED]"},{"type":"Resistivity Attenuation -Corr- 2MHz BHI_LWD"}
]
}];
$scope.statistics = []
$scope.populate = function() {
$scope.statistics = [
{"val":"None"},{"val":"Mean"},{"val":"Median"},{"val":"Mode"},{"val":"Std Deviation"},{"val":"Variance"},
{"val":"Mix "},{"val":"Max"}
]
}
});
</script>
</body>
</html>
The Above code is printing the two select boxes four times.The requirement is to not show any option in second select box before the user selects the first select box.I have achieved it by emptying the statistics array initially and populating it using on change function.
The problem is that when I select an option in first select box in row1 the respective 'select statistic' is getting populated which is fine but along with it the remaining 'select statistic' select boxes are also getting populated.I need it to be empty until i select the respective row select box.The explanation may be confusing please check the demo for better understanding. Thanks in Advance!Please help..
I have included the Demo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.margins{
margin-right:8px;
margin-bottom: 5px;
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<h2>LogValues</h2>
<div class="logval" ng-repeat="num in loop">
<select class="margins" id="inputGroupSelect01"
ng-model="num.logType"
ng-options="x.type for x in logValues[0].parameters">
<option value="" disabled selected>Select Log Values</option>
</select>
<select class="margins" ng-disabled="!num.logType"
ng-model="logVal"
ng-options="y.val for y in statistics">
<option value="" selected>Select Statistic</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.loop = [{"stat":1},{"stat":2},{"stat":3},{"stat":4}];
$scope.logValues =
[
{
"name" : "Log Values",
"parameters" :
[
{"type":"Depth Curve"},{"type":"Conductivity Attenuation -Corr- 400kHz BHI_LWD"},{"type":"Conductivity [CACLMED]"},{"type":"DeepResistivity[RACLMED]"},
{"type":"DeltaTCompressionalBHI_LWD"},{"type":"Sonic Compressional [DTCED]"},{"type":"Gamma Ray - Apparent BHI_LWD"},{"type":"Gamma Ray [GRAMED]"},
{"type":"Medium Resistivity [RPCLMED]"},{"type":"Resistivity Attenuation -Corr- 2MHz BHI_LWD"}
]
}];
// $scope.statistics = []
// $scope.populate = function() {
$scope.statistics = [
{"val":"None"},{"val":"Mean"},{"val":"Median"},{"val":"Mode"},{"val":"Std Deviation"},{"val":"Variance"},
{"val":"Mix "},{"val":"Max"}
]
//}
});
</script>
</body>
</html>
First you must loop on objects instead of numbers in $scope.loop in order to generate different scope for each select model, one value for each ng-model and then you can disable the second select box depending on the value of the first select box. Here I have disabled the second select box if the first select box model is undefined.. It will be enabled once you pick up a log value
$scope.GetDetails={
Student:[
{"id":1,"Name":"Apple","Price":3500}
],
Student:[
{"id":2,"Name":"Samsung","Price":4000}
],
Student:[
{"id":3,"Name":"Nokia","Price":1500},
{"id":3,"Name":"Nokia","Price";7000}
]
}
Am binding data using ng-repeat
<div ng-repeat="As in GetDetails">
<div ng-repeat="A in As.Student">
<span>{{A.Name}}</span> - <span>{{A.Price}}</span>
</div>
</div>
Result is
Apple - 3500
Samsung - 4000
Nokia - 1500
Nokia - 7000
Here every thing Ok.But what i want mean , Nokia have two array ,so i have to get name from first array and price from 2nd array Like,
Nokia - 7000,
And Also i need the length of student array.
First, You should change your JSON to achieve your result.
Change JSON to below:
$scope.GetDetails=[
{Student:[{"id":1,"Name":"Apple","Price":3500}]},
{Student:[{"id":2,"Name":"Samsung","Price":4000}]},
{Student:[{"id":3,"Name":"Nokia","Price":1500},{"id":3,"Name":"Nokia","Price":7000}]}
]
Please run below code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="As in GetDetails">
<div ng-repeat="A in As.Student" ng-if="$last">
<span>{{A.Name}}</span> - <span>{{A.Price}}</span>
</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.GetDetails=[
{Student:[{"id":1,"Name":"Apple","Price":3500}]},
{Student:[{"id":2,"Name":"Samsung","Price":4000}]},
{Student:[{"id":3,"Name":"Nokia","Price":1500},{"id":3,"Name":"Nokia","Price":7000}]}
]
});
</script>
</body>
</html>
I used ng-if="$last" to take the last value from array
Here is a working DEMO
If you want this only for Name: Nokia, then do it like;
<div ng-repeat="A in As.Student">
<span ng-if="A.Name!=='Nokia'">{{A.Name}}-{{A.Price}}</span>
<span ng-if="A.Name==='Nokia' && $last">{{A.Name}}-{{A.Price}}</span>
</div>
and it you want only last element from every array :
then:
<div ng-repeat="A in As.Student" ng-if="$last">
<span>{{A.Name}}</span> - <span>{{A.Price}}</span>
</div>
I have a collection of items that represent a grouping by one property. I want to create a list of items grouped by the value of this property and in each list present the value of this group once and then all the items that belong to the group.
Something like the following
<div ng-repeat="items in itemcollection | unique: 'groupkey'">
<h3>{{items.groupkey}}</h3>
<div ng-repeat="item in items">
<label>{{item.name}}</label>
</div>
</div>
So if I have a itemscollection like the following:
{{ groupkey: 1; name: 'Ada'}, { groupkey: 1; name: 'Beda'}, {groupkey: 2; name: 'Ceda'}}
So after the generation of divs and labels the result should be
<div>
<h3>1</h3>
<div><label>Ada</label></div>
<div><label>Beda</label></div>
</div>
<div>
<h3>2</h3>
<div><label>Ceda</label></div>
</div>
Is it possible to create this or do I need to handle the creating of the elements to better construct the data to make this happen?
This filter does what you want : https://github.com/a8m/angular-filter#groupby
Yes. Its possible by the combination of orderBy and filter function in angularJS. The following code will work :
var app = angular.module("myApp", []);
app.controller("lists", function($scope) {
$scope.list = [{
groupkey: 1,
name: 'Ada'
}, {
groupkey: 1,
name: 'Beda'
}, {
groupkey: 2,
name: 'Ceda'
}];
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
</head>
<body>
<div ng-controller="lists">
<div ng-repeat="items in list | orderBy:'groupkey'">
<h3>{{items.groupkey}}</h3>
<label>{{items.name}}</label>
</div>
</div>
</body>
</html>
Hope it works for you :)
Not tested but something like this I guess should work
<div ng-repeat="items in itemcollection | unique: 'groupkey'">
<h3>{{items.groupkey}}</h3>
<div ng-repeat="item in items | filter:{'groupkey': items.groupkey}:true">
<label>{{item.name}}</label>
</div>
</div>
If you make sure the itemcollection is sorted by groupkey you may display the groupkey header only when the groupkey differs from the previous groupkey. Then you achieve to only show the groupkey header once per group. Here is an example:
angular.module('myapp',[]).controller("thectrl", function($scope) {
$scope.itemcollection = [{ groupkey: 1, name: 'Ada'},
{ groupkey: 1, name: 'Beda'},
{groupkey: 2, name: 'Ceda'},
{groupkey: 2, name: 'D'}];
$scope.itemcollection.sort(function(a,b) { return a.groupkey-b.groupkey;});
});
The HTML:
<div ng-app="myapp" ng-controller="thectrl">
<div ng-repeat="item in itemcollection track by $index" >
<h3 ng-if="$index===0 || itemcollection[$index-1].groupkey!==item.groupkey">{{item.groupkey}}</h3>
<label>{{item.name}}</label>
</div>
</div>
And a working fiddle here:
https://jsfiddle.net/vuksyeyh/
I'm trying to figure out how to use a set of if-else statements to dynamically change a value in the DOM using Angular JS.
The value I want to change is basketballpayout.basketballpay based on what the value of the team's total salary is (payout.grossprod)
Here's the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body ng-app="Payout">
<form novalidate ng-controller="PayoutCtrl">
ENTER YOUR TEAM'S TOTAL SALARY <input type="text" name="Gross Production" placeholder="$" ng-model="payout.grossprod"><br />
ENTER YOUR CURRENT TEAM'S NET PAYOUT ACCOUNT <input type="text" name="Net Payout" placeholder="%" ng-model="payout.currentpay"><br />
<p >Current Payout: {{payout.currentpay}} %</p>
<p>Current Yearly Compensation: {{payout.grossprod * payout.currentpay / 100 | currency }}</p><br />
<p>basketball Payout: {{basketballpayout.basketballpay}} %</p>
</form>
var app = angular.module("Payout",[]);
app.controller("PayoutCtrl", function($scope) {
$scope.payout= {currentpay: 0, grossprod: 0};
$scope.basketballpayout= {basketballpay: "", basketballcom: 0, basketballdif: 0};
if ($scope.payout.grossprod === 0){
$scope.basketballpayout.basketballpay="0";
percent = 0;
} else if ($scope.payout.grossprod < 175000){
$scope.basketballpayout.basketballpay="20";
percent = 0.20;
} else if ($scope.payout.grossprod < 200000){
$scope.basketballpayout.basketballpay="25";
percent = 0.25;
} else {
$scope.basketballpayout.basketballpay="60";
percent = 0.60;
}
});
Just set the view binding to a function call rather than a property and have that function do the needed calculation.
Live Demo
<p>{{ foo() }}</p>
JS:
$scope.foo = function() {
//calculate and return the desired binding
return $scope.bar * $scope.baz;
};
The other problem you're having is that you're comparing strings as though they are numbers. You should use type="number" or you can use myNumber = parseInt($scope.myProp, 10) to get a number rather than a string.
This is a sample of how one select input is dependent on another select input.
<md-select name="inputName" ng-model="inputModel"
ng-change="anotherInputModel = (inputModel == 'Some Value') ? 'value of anotherInputModel' : (inputModel == 'Some other value') ? Some Another Value : ''>
<md-option ng-value="val.value" ng-repeat="val in val">
{{val.value}}
</md-option>
</md-select>
<md-select name="anotherInput" ng-model="anotherInputModel">
<md-option ng-value="value.value" ng-repeat="value in Values">
{{value.name}}
</md-option>
</md-select>
I have the following code:
<html ng-app="myApp">
<head>
<title>Angular Demo</title>
<script src="angular/angular.min.js"></script>
<script src="js/controllers.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
</head>
<body>
<div ng-controller="myController">
<div ng-init="oras='Valcea'"></div>
<input type="text" ng-model="search"><br/><br/>
<select name="" id="" ng-model="eleviorder">
<option value="name">Nume</option>
<option value="prenume">Prenume</option>
<option value="age">Varsta</option>
<option value="highscool">Liceu</option>
<option value="luckynumber">Numar norocos</option>
</select>
Ordonare Nume:<label>
<input type="radio" name="direction" ng-model="direction" checked/>ascending</label>
<label>
<input type="radio" name="direction" ng-model="direction" value="reverse"/>descending
</label>
<ul>
<li ng-repeat="item in elevi | filter :search | orderBy :eleviorder :direction :myfunction">
<div>{{item.name}} {{item.prenume}}, Varsta:{{item.age}}, Liceu: {{item.highscool}}, Numar norocos: {{item.luckynumber}} Oras:{{oras}}</div>
</li>
</ul>
</div>
</body>
</html>
with this controller
var myApp = angular.module('myApp', []);
myApp.controller('myController',['$scope','$http',function ($scope,$http){
$http.get('js/data.json').success(function(data){
$scope.elevi = data;
$scope.eleviorder = 'name';
});
}]);
who get this data from data.json
[
{"name":"Udrea",
"prenume":"Alexandru",
"age":"27",
"highscool":"Henri Coanda",
"luckynumber":"7"
},
{"name":"Rizea",
"prenume":"Paul",
"age":"23",
"highscool":"Mircea Cel Batran",
"luckynumber":"11"
},
{"name":"Popescu",
"prenume":"Ion",
"age":"19",
"highscool":"Pedagogic",
"luckynumber":"17"
},
{"name":"Popescu",
"prenume":"Maria",
"age":"18",
"highscool":"Sanitar",
"luckynumber":"8"
},
{"name":"Muscalu",
"prenume":"Leonard",
"age":"22",
"highscool":"Forestier",
"luckynumber":"47"
},
{"name":"Ionescu",
"prenume":"Ema",
"age":"29",
"highscool":"Alexandru Lahovari",
"luckynumber":"26"
}
]
My problem is that i can't orderby the luckynumber in natural order it orders the luckynumber like this 11,17,26,47,7,8 instead of 7,8,11,17,26,47
That's because angularjs consider this field as being a string property. So it is ordered in the alphabetical order. If you remove the quotes from the values of the integer properties, it should be working.
[
{"name":"Udrea",
"prenume":"Alexandru",
"age":27,
"highscool":"Henri Coanda",
"luckynumber":7
},
{"name":"Rizea",
"prenume":"Paul",
"age":23,
"highscool":"Mircea Cel Batran",
"luckynumber":11
},...
]