<input type="number" ng-model="limit"/>
<button ng-click="runNames()" />
<div style="height:150px;width:150px" class="boxed" ng-repeat="name in names">
{{name|uppercase}}
</div>
mainModule.controller('helloWorldController', ['$scope', function ($scope) {
$scope.runNames = function () {
$scope.names = [];
for (i = 0; i < $scope.limit; i++) {
$scope.names.push("pratik");
}
};
}]);
If you really want to have duplicated items in array, make sure you tell Angular to index them by $index so that Angular could distinguish individual items:
<div ng-repeat="name in names track by $index">
{{name|uppercase}}
</div>
Related
I am new to Angularjs. I am trying to do is like this. I have an input field where user inputs a number. Then a dropdown is generated where number of options should be equal to the number entered by the user. Here is my code:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.addqty = function() {
var i;
for (i = 0; i < $scope.quantity; i++) {
$scope.choices = i;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="text" ng-model="qauntity" />
<button ng-click="addqty()">Add</button>
<fieldset data-ng-repeat="choice in choices">
<select>{{choices}}</select>
</fieldset>
</div>
Try something like this:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.choices = [];
$scope.quantity = 0;
$scope.addqty = function() {
$scope.choices = [];
for (i = 0; i < $scope.quantity; i++) {
$scope.choices.push(i)
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="number" ng-model="quantity" />
<button ng-click="addqty()">Add</button>
<div>
<select>
<option ng-repeat="choice in choices">
{{choice}}
</option>
</select>
</div>
</div>
You have an empty array, then when you click the button an amount of items equal to the quantity that was input is pushed into the array, which in turn is used to populate the select. I think type="number" on the input is more appropriate in this instance, to make sure the user doesn't use text instead of a number.
$scope.choices = []; resets the array to empty before starting to populate it again, in case someone clicks the button multiple times.
If you want to spice things up a little and make the whole thing a little neater you can add <div ng-show="choices.length > 0"> around the select-tag. This will ensure that the dropdown is only rendered when there's atleast one item in the array.
All that's left to do then is make sure you can actually continue working with the selected value:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.choices = [];
$scope.quantity = 0;
$scope.selected;
$scope.addqty = function() {
$scope.choices = [];
for (i = 0; i < $scope.quantity; i++) {
$scope.choices.push(i)
$scope.selected = $scope.choices[0];
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="number" ng-model="quantity" />
<button ng-click="addqty()">Add</button>
<div ng-show="choices.length > 0">
<select ng-model="selected">
<option ng-repeat="choice in choices">
{{choice}}
</option>
</select>
</div>
<div ng-show="choices.length > 0">
<label>Selected value: {{selected}}</label>
</div>
</div>
You don't have to write any javascript function to do this. You can make use of array.constructor method and pass the corresponding input number value to implement the functionality.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl"> Enter quantity:
<input type="number" ng-model="quantity" />
<button ng-click="val=quantity">Add</button>
<div ng-if="val!=undefined">
<select>
<option value="{{$index+1}}" ng-repeat="x in [].constructor(val) track by $index"> {{$index+1}} </option>
</select>
</div>
</div>
angular.module('app', []).controller('ctrl', function($scope){
$scope.show = function(){
$scope.array = [];
for(var i = 0; i < $scope.quantity; i++)
$scope.array.push(i + 1);
$scope.selected = $scope.array[0];
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<input type='number' ng-model='quantity' />
<input type='button' ng-click='show()' value='Create' />
</br>
<select ng-model='selected' ng-options="item for item in array">
</select>
</div>
You could create an array of objects in the scope and in your addqty function you can push an object to that array which includes the value and the text you want to the user to see.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.choises = [];
$scope.addqty = function() {
var i;
for (i = 0; i < $scope.quantity; i++) {
$scope.choises.push({value:i,text:'text'});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="text" ng-model="quantity" />
<button ng-click="addqty()">Add</button>
<div ng-show="choises.length > 0">
<select>
<option
value="{{choise.value}}"
ng-repeat="choise in choises">
{{choise.text}}
</option>
</select>
</div>
</div>
Just made more better by hiding the New dropdown until no value is assigned:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.choices = [];
$scope.quantity = 0;
$scope.addqty = function() {
$scope.choices = [];
for (i = 0; i < $scope.quantity; i++) {
$scope.choices.push(i)
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Enter quantity: <input type="number" ng-model="quantity" />
<button ng-click="addqty()">Add</button>
<div>
<select ng-show="choices.length">
<option ng-repeat="choice in choices">
{{choice}}
</option>
</select>
</div>
</div>
I have the following string;
$scope.Array="5678,9876,0988"
I am displaying it in my html as follows:
<li ng-repeat="ArrayItem in Array.split(',')">
<input type="checkbox" >
{{Zip}}
</li>
this displays all the string items separately along with a check box. I would like to know how to select multiple items from the list on the UI, and on the press of delete, delete these items from Array.
e.g. check 5678, 9876, and click Delete. The Array would now only have 0988.
angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
$scope.toDelete = {};
$scope.Array="0988,9876,0988";
$scope.delete = function(){
$scope.temp = $scope.Array.split(',');
for(var prop in $scope.toDelete){
if($scope.toDelete[prop])
$scope.temp[prop] = undefined;
}
$scope.toDelete = {};
$scope.Array = $scope.temp.filter(function(x){ return x !== undefined; }).join(',');
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<ul>
<li ng-if='Array' ng-repeat="ArrayItem in Array.split(',') track by $index">
<input type="checkbox" ng-model='toDelete[$index]'>{{ArrayItem}}
</li>
</ul>
Array: {{Array | json}}
<br>
<input type='button' value='Delete' ng-click='delete()'/>
</div>
I would like to download a response on a server in JSON which contains the attribute to populate my select list. I would like to do it with AngularJS and I'm using Angular 2.
Nothing appears, I think the problem is on my attribute ng-repeat :
<div id="myDiv">
<div ng-app="d3DemoApp">
<div ng-controller="AppCtrl">
<div ng-repeat="n in filters track by $index">
{{n}}
</div>
</div>
</div>
</div>
This is my controller :
angular.module('d3DemoApp',[])
.controller('myCtrl',function($scope) {
$scope.notes = userService.getData();
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "releaseFilter");
myDiv.appendChild(selectList);
selectList.setAttribute("class", "form-control");
selectList.setAttribute("onclick", "myFunction()");
//Create and append the options
for (var i = 0; i < $scope.notes.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", array[i]);
option.text = $scope.notes[i];
selectList.appendChild(option);
}
});
This is the service which should download the response :
app.service("userService",["$http",
function($http) {
_this = this;
this.getData = function() {
},
$http.get('./dataOnServer.json'). // This adress is normally an HTTP adress which send me the JSON
success(function(data) {
return data;
});
}
]);
This is an online example of the problem with Plunker : https://plnkr.co/edit/du7sU8bhg2G3X7HckbV9?p=preview
I hope you will can help me, thanks a lot !
I would point out that you are repeating filters when you are not defining such variable in your scope or anywhere? You should probably repeat $scope.notes so it would go like this:
<div id="myDiv">
<div ng-app="d3DemoApp">
<div ng-controller="AppCtrl">
<div ng-repeat="n in notes track by $index">
{{n}}
</div>
</div>
</div>
</div>
EDIT:
And you can do a select like this:
<select>
<option ng-repeat="n in notes">{{n.value}}</option>
</select>
And your JSON is invalid. It should be like this for the repeat:
[{value: "value 1"},{value: "value 2"},{value: "value 3"}]
In this code below, i like to be able to make the length of my menu dynamic with Angular data binding by taping it in the input and getting it in real time.
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Number of characters : <input type="number" ng-model="nmba" ></p>
<ul>
<li ng-repeat="x in chars track by $index">
{{ x}}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
function printCharacters(param) {
var result = [];
for (i = 1; i <= param; i++) {
result.push('a');
}
return result;
}
$scope.chars = printCharacters($scope.nmba);
});
</script>
So i wrote it as above but it is not displaying anything. Am i missing something ?
Thank you for any help.
This is becuse printCharacters called just on controller init and at this point $scope.nmba =""
You need to call this func on any change in input field.
<input type="number" ng-model="nmba" ng-change="printCharacters(nmba)">
Also you need to expose printCharacters to $scope
$scope.printCharacters = function(nbma){}
I am using ng-repeat to create an array of items (a list), I would like to have an id against each item to be it's position in the array.
JS FIDDLE DEMO HERE: http://jsfiddle.net/m62Ez/15/
Please have a look at the following, looks like the ng-model="item.id" is never assign. Any suggestions much appreciated.
HTML
<div ng-controller="MainCtrl">
<button ng-click="addItem()">Add Item</button>
<ul>
<li ng-repeat="item in items">
<input type="hidden" ng-model="item.id" ng-value="{{$index}}" />
<input type="text" ng-model="item.name" />
</li>
</ul>
<hr />
<button ng-click="saveAll()">Save All</button>
</div>
JS
var app = angular.module("app", []);
app.controller("MainCtrl", function ($scope) {
$scope.items = [];
$scope.addItem = function () {
$scope.items.push({});
}
$scope.saveAll = function () {
console.log($scope.items); // item's do not have id's
}
});
The hidden field isn't useful. If you want your objects to have an ID, then generate them with an ID:
$scope.addItem = function () {
$scope.items.push({id: $scope.items.length});
}
Updated jsfiddle: http://jsfiddle.net/K7DgE/