I'm trying to repeat a piece of html based on value of my model. If a user select "3" at the dropdown, it will display "1,2,3" each one on it's own div. After that, if user changes the dropdown to 2, then it should render only "1,2".
Here's what I'm trying:
<html ng-app="app">
<head>
<title>teste</title>
</head>
<body ng-controller='testController'>
<select ng-model="quantity">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div ng-repeat="i in getNumber(quantity) track by $index">{{$index + 1}}</div>
Value on Model:{{quantity}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller('testController',['$scope', function($scope){
$scope.quantity = 1;
$scope.getNumber = function (num) {
return new Array(num);
};
}]);
</script>
</body>
</html>
Until now, it's not working the render part based on model value. What am I misising?
Using the limitTo filter is the most idiomatic way to do this
angular.module('app',[])
.controller('testController', function($scope) {
$scope.values=[1,2,3,4,5,6];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller='testController'>
<select ng-model="quantity">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div ng-repeat="i in values | limitTo:quantity">{{i}}</div>
</body>
$scope.getNumber = function (num) {
return new Array(parseInt(num));
};
also works from your code
<html ng-app="app">
<head>
<title>teste</title>
</head>
<body ng-controller='testController'>
<select ng-model="quantity" ng-change="changed()">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div ng-repeat="i in values track by $index">{{$index + 1}}</div>
Value on Model:{{quantity}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller('testController',['$scope', function($scope){
$scope.quantity = 1;
$scope.values = [1]
$scope.getNumber = function (num) {
return new Array(num);
};
$scope.changed = function() {
$scope.values = new Array(parseInt($scope.quantity));
}
}]);
</script>
</body>
</html>
Related
I need something like this:
<div ng-repeat="customer in customers">
<select ng-options="option.Name for option in **getOptions(customer.ID)**"></select>
</div>
Is it possible?
Yes , as long as the function is synchronous. Using a filter expression in ng-options is also an alternative
const app = angular.module('myApp', []);
app.controller('myCtrl', function() {
this.getNames = () => ["Emil", "Tobias", "Linus"]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as $ctrl">
<select ng-model=" $ctrl.selectedName" ng-options="item for item in $ctrl.getNames()" size=5>
</select>
<p ng-if=" $ctrl.selectedName">Selected: {{ $ctrl.selectedName}}</p>
</div>
const app = angular.module('myApp', []);
app.controller('myCtrl', function() {
this.getNames = () => ["Emil", "Tobias", "Linus"]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as $ctrl">
<select ng-model=" $ctrl.selectedName" ng-options="item for item in $ctrl.getNames()" size=5>
</select>
<p ng-if=" $ctrl.selectedName">Selected: {{ $ctrl.selectedName}}</p>
</div>
Thank you for your answer. But I can't work it. My code below.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module("MainModule", []);
app.controller('TestController', function ($scope, $http, $filter) {
$scope.one = ["Sam", "Samantha", "George"]
$scope.two = ["Jack", "Sandra", "Bill"]
$scope.getOptions = function (id) {
if (id === 1) {
return $scope.one;
}
else if (id ===2) {
return $scope.two;
}
};
});
</script>
</head>
<body ng-app="MainModule" ng-controller="TestController>
<div>
<select ng-options="item for item in TestController.getOptions(1)"></select>
<select ng-options="item for item in TestController.getOptions(2)"></select>
</div>
</body>
</html>
Hi I want to do some like this:
{{item.price.{{comparator}}}}
I mean, take a value from type of price using a {{comparator}} variable.
this is an example of my code (the data is bigger and I have more types of prices):
var items = [
{"name":"Item1",price:{public:10,private:15,other1:16.3,other2:17.5}},
{"name":"Item2",price:{public:20,private:45}},
]
var angularApp = angular.module('angularApp', [
'angularAppControllers',
]);
var angularAppControllers = angular.module('angularAppControllers', []);
angularAppControllers.controller('ComparationCtrl', ['$scope',
function ($scope) {
$scope.comparator = "private";
$scope.data = items;
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-App="angularApp">
<div ng-controller="ComparationCtrl">
<select ng-model="comparator">
<option value="public">Public</option>
<option value="private">Private</option>
<option value="other1">Other 1</option>
<option value="other2">Other 2</option>
<option value="othern">....</option>
</select>
{{comparator}}
<br />
<ul>
<li ng-repeat="item in data">
{{item.name}} - {{item.price.public}} - <strong>(item.price.{{comparator}})</strong>
</li>
</ul>
</div>
</div>
Hum, assuming item.price and comparator are defined in your $scope, try:
{{ item.price[comparator] }}
Like this: https://plnkr.co/edit/IrheJrHz8eOfb5LmTx7x
angular.module('app', [])
.config(function() {
})
.controller('ctrl', function($scope) {
$scope.obj = {
"name": "Item1",
"price": {
"public": "10",
"private": "15",
"other1": "16.3",
"other2": "17.5"
}
};
$scope.prop = 'public';
});
And the HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="ctrl">
<pre>{{obj.price[prop]|json}}</pre>
<script src="script.js"></script>
</body>
</html>
Basically, {{obj[aPropertyDefinedInScope]}}
Here is my html part
<select style="width:250px; height:50px">
<option ng-model="sellerDetails" ng-click="sellerValue(sellerDetails)" >seller 1</option>
<option >seller 2</option>
<option >seller 3</option>
</select>
here is my controller part
$scope.sellerValue= function(sellerDetails){
console.log("invoking sellerValue");
console.log(sellerDetails);
}
what is wrong i am doing here
i am not even invoking the controller part of my sellervalue funtion
There are some points:
Point 1: You've placed the ngModel in <option>, while it should be in <select> tag.
Point 2: ngClick is used to trigger, obviously click, it isn't the correct directive that you should use in this case, because a click doesn't mean that you changed the value of that field. The correct one is ngChange that detects real changes.
Point 3: Since you already have the value of selected item stored in $scope.sellerDetails you don't need to pass it as parameter to your function.
Point 4: I recommend you to use ngOptions instead of doing it statically.
See it working:
(function() {
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.sellers = [];
function loadSellers(max) {
for (var i = 1; i <= max; i++) {
$scope.sellers.push("Seller " + i);
}
}
loadSellers(3);
$scope.sellerValue = function() {
console.log("sellerValue: ", $scope.sellerDetails);
}
}
})();
.select-field {
width: 250px;
height: 50px
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
Statically:
<select class="select-field" ng-model="sellerDetails" ng-change="sellerValue()">
<option>seller 1</option>
<option>seller 2</option>
<option>seller 3</option>
</select>
<hr>
With ng-options:
<select class="select-field" ng-options="seller for seller in sellers" ng-model="sellerDetails" ng-change="sellerValue()">
<option value="" disabled hidden>Select a seller</option>
</select>
</body>
</html>
I hope it helps!!
Try this ,
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.sellerDetails = 'seller 1';
$scope.sellerValue= function(sellerDetails){
console.log("invoking sellerValue");
console.log(sellerDetails);
}
});
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<select style="width:250px; height:50px" ng-model="sellerDetails" ng-click="sellerValue(sellerDetails)">
<option >seller 1</option>
<option >seller 2</option>
<option >seller 3</option>
</select>
</body>
I want to get the ID of selected option in datalist, using select it is easy but I dont know how to get the ID of the option name.
I made one code snippet at JSBIN
var app = angular.module('app', []);
app.controller('getLocalityId', function($scope) {
$scope.localityList = [{
name: "Rome",
id: 1
}, {
name: "London",
id: 2
}, {
name: "Paris",
id: 3
}];
$scope.fetchId = function(id) {
console.log(id);
};
});
HTML goes like this
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="col-lg-6" ng-controller="getLocalityId">
<label for="locality">Locality</label>
<input class="input form-control" placeholder="Search By Name" list="locality" ng-model="obj.id" ng-change="fetchId(obj.id)" />
<datalist id="locality" name="locality">
<select>
<option ng-repeat=" obj in localityList" value="{{ obj.name }}" selected-value="{{ obj.id }}">{{ obj.id }}</option>
</select>
</datalist>
</div>
</body>
</html>
Use ng-options in your case:
<select ng-model="currentID" ng-options="obj.id as obj.name for obj in localityList"></select>
Demo
I'm struggling to understand how ng-options works with a data source. I've read the docs and I feel like I'm doing exactly what is required, but I still get problems when attempting.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
angular.module('app', [])
.controller('IndexCtrl', ['$scope', function($scope) {
$scope.types = {
1: "value1",
2: "value2",
5: "value3"
};
}]);
</script>
</head>
<body ng-controller="IndexCtrl">
<select ng-model="type" ng-options="k as v for(k, v) in types">
<option value="">Select Type</option>
</select>
</body>
</html>
I always get this error in the console:
Error:
Expected ngOptions in form of 'select (as label)? for (key,)?value in collection (track by expr)?' but got 'k as v for(k, v) in types'.
What am I doing incorrectly?
See plunkr here:
http://plnkr.co/edit/Bl6u4151KyDkxhYrsdCm?p=preview
This is kind of strange, but it seems like you need to put a space after for. This works:
<select ng-model="type" ng-options="k as v for (k, v) in types">
<option value="">Select Type</option>
</select>