can not add new element using ng-repeat in Angular.js - javascript

I need one help. I need to create extra input element using ng-repeat in angular.js. I did something but its not working. I explaining my code below.
<div>
<ul>
<li ng-repeat="r in arr">
<input type="text" ng-model="r.uname">
</li>
</ul>
</div>
<button type="button" id="btn" ng-click="create();">Add</button>
Here I need when user will click on add button the new input field will create just below the first one. My scripting side code is given below.
<script type="text/javascript">
function ContactController($scope){
$scope.arr=[{uname:null}];
$scope.create=function(){
console.log('hii');
$scope.arr.push({
uname:null
});
console.log('hi',$scope.arr);
}
}
</script>
But here i am unable to generate the new input type element. Please help me.

I don't see an error in your code. it works: http://jsfiddle.net/Lvc0u55v/9536/
$scope.arr=[{uname: null}];
$scope.create = function(){
console.log('hii');
$scope.arr.push({
uname: null
});
console.log('hi',$scope.arr);
}

Define your array like this..
$scope.arr=[{}];
$scope.create=function(){
$scope.arr.push({});
console.log('hi',$scope.arr);
}
everything else looks fine..

Please refer to this.
Use track by in order to achieve the thing you're aiming for:
<li ng-repeat="r in arr track by $index">

the first thing u are pushing the same element in the array so you want to track the in the ng-repeat
<div ng-repeat="r in arr track by $index">
<input type="text" ng-model="r.uname"> </div>
still it is not creating then try the console is coming and it is not creating
use $scope.$apply() to manually run the digest cycle

Which version of angular are you running. The code which you mentioned would not work in angular 1.3 and above. It works in 1.2 though. See this with 1.2
https://plnkr.co/edit/52ygFNbSFZQr3SdCvlDc?p=preview
<body ng-controller="ContactController">
<p>Hello {{name}}!</p>
<div>
<ul>
<li ng-repeat="r in arr">
<input type="text" ng-model="r.uname">
</li>
</ul>
</div>
<button type="button" id="btn" ng-click="create();">Add</button>
<script type="text/javascript">
function ContactController($scope){
$scope.arr=[{uname:null}];
$scope.create=function(){
console.log('hii');
$scope.arr.push({
uname:null
});
console.log('hi',$scope.arr);
}
}
</script>
For 1.4 and above use the following. https://plnkr.co/edit/t7STLztqoMiPKaiHr62V?p=preview
<body ng-controller="ContactController">
<p>Hello {{name}}!</p>
<div>
<ul>
<li ng-repeat="r in arr">
<input type="text" ng-model="r.uname">
</li>
</ul>
</div>
Add
app.controller('ContactController', function($scope) {
$scope.name = 'World';
$scope.arr=[{uname:null}];
$scope.create=function(){
console.log('hii');
$scope.arr.push({
uname:null
});
console.log('hi',$scope.arr);
}
});

Related

AngularJS advice on how to fix a bug when pushing two of the same strings into the array

I'm having trouble trying to figure out how to fix a bug that happens when I try to push the same string as added previously to the array. It gets stuck and will not allow the app to post another string.
How do I make sure that your repeat doesn't get stuck when there two of the same values in the array?
Bug Example Screenshot
--> Bug happens when I try to push "1"into the array again after a "1" is already posted.
HTML Code
<body>
<div data-ng-controller="appController" class="container">
<div class="row">
<form>
<label for = "status"> Status: </label>
<input data-ng-model = "input_data" type="text" id="status"/>
<button data-ng-click="add_data()"> OK </button>
<ul class = "list-group">
<li class="list-group-item" data-ng-repeat="x in array_data">
{{x}}
<button data-ng-click = "remove_data($index)">DEL</button>
</li>
</ul>
</form>
</div>
</div>
<script src="framework/js/jquery.min.js"></script>
<!-- All Bootstrap plug-ins file -->
<script src="framework/js/bootstrap.min.js"></script>
<!-- Basic AngularJS -->
<script src="framework/js/angular.min.js"></script>
<!-- Your Controller -->
<script src="framework/js/appstatpost.js"></script>
</body>
AngularJS code
var app = angular.module("myApp", []);
app.controller("appController", function ($scope) {
$scope.array_data = [];
$scope.add_data = function () {
$scope.array_data.push($scope.input_data);
};
$scope.remove_data = function (index) {
$scope.array_data.splice(index, 1);
};
});
You could use track by $index, example:
<li class="list-group-item" data-ng-repeat="x in array_data track by $index">
AngularJS tries by default to find a key in your array to index by. Normally this works well, but if you have duplicates then you have to tell AngularJS to make a new index, in this case, $index.

Using ng-if to check angular variable from another directive in angularjs

I am new to angular. I have a task to display json data in specific design, but I have not idea about nesting of json. Is it possible to check if the data is json or an array of json and then display the output.
Here I am trying to display data only if it is an array. But it is not working. Kindly help.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp">
<div ng-controller="readJson as rj">
<div ng-repeat="d in rj.data">
<ul>
<div ng-model="myVar" ng-init="myVar = "{{isArray(d.third)}}>
<div ng-if="myVar">
<li>{{d.third}}</li>
</div>
</ul>
</div>
</div>
</div>
</body>
<script>
(function(){
var app=angular.module('myApp',[]);
app.controller('readJson',function($scope){
$scope.isArray = angular.isArray;
this.data=[{"first":"one","second":"two","third":"three"},
{"first":"ONE","second":"two","third":"three"},
{"first":"onE","second":"two","third":
[
{"first":"1one","second":"2two","third":"3three"},
{"first":"1ONE","second":"2two","third":"3three"}
]}];
});
})();
</script>
</html>
Here you go. This example will display data only when "third" param is an array.
https://plnkr.co/edit/EX0BvcYrLPFbiN2ezlqQ
<div ng-repeat="d in data">
<ul>
<div ng-init="myVar = isArray(d.third)"></div>
<div ng-if="myVar">
<li>{{d.third}}</li>
</div>
</ul>
</div>
The problem was in ng-init="myVar = "{{isArray(d.third)}} - you need to make sure isArray(d.third) is in expression (between "") and there is no need to use {{}} syntax within ng-init directive. It will evaluate expression for you (check an example).

AngularJS $index always 0

i am having a problem with angularjs and $index
i give it at a parameter to a function. It works at HTML in {{}} ({{$index}} works). But it doesnt work in the function. I alert the index and its always 0...
I used it at another position in my project and it works fine..
Here is the code.
<input type="checkbox" id="rounded1" ng-click="setClickEvent($index)" ng-model="clickStatus"/>
JS File with the function:
$scope.setClickEvent = function(index) {
alert(index);
};
the alert is always 0....
i hope someone could help me. Thanks :)
It looks like you're not using this <input> tag in an ng-repeat directive. $index will show 0 unless it's used in an ng-repeat where it will count from 0 to n.
Perhaps you meant to do something like this:
<div ng-repeat="i in [1, 2, 3, 4, 5] track by $index">
<input type="checkbox" ng-click="setClickEvent($index)" ng-model="clickStatus"/>
</div>
I removed the ID because each of the 5 checkboxes would have the same ID which isn't valid.
Sorry, here is the whole html code with the ng-repeat
<div ng-repeat="frage in frageListe">
<div class="input-group">
<div class="container-fluid list-group-item ">
<div class="rounded">
<input type="checkbox" id="rounded1" ng-click="setClickEvent(frage.id)" ng-model="clickStatus"/>
<label for="rounded1"></label>
</div>
<div class="list-text">
<h3 class="list-group-item-heading quest-list-text serif">{{frage.titel}} {{$index}}</h3>
</div>
</div>
</div>
<hr class="divider-line-questlist">
</div>
Not sure if this is relevant, but I had the same problem. For me the issue was that I was nesting multiple ng-repeats. To solve this I set aliases for the indexes with ng-init.
https://docs.angularjs.org/api/ng/directive/ngInit
<script>
angular.module('initExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [['a', 'b'], ['c', 'd']];
}]);
</script>
<div ng-controller="ExampleController">
<div ng-repeat="innerList in list" ng-init="outerIndex = $index">
<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
<span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>
</div>
</div>
</div>

How to Iterate over javascript Map using angular ng-repeat

I'm developing an Angualr application where we have a Map object (as shown below). The key and value of the map object (headerObj) are coming from user as input to the app,
var headerObj = new Map();
headerObj.set(key,value);
I'm iterating through them using foreach as shown below, the output is coming as expected
$scope.inputHeaders.forEach(function (headerkey, headervalue) {
console.log(headerkey, headervalue;
});
but I have to show this map values in UI, which again user can edit, so I have binded them
<li class="list-group-item" ng-repeat="header in inputHeaders">
<div ng-repeat="(key, value) in header">
{{key}} : {{value}}
</div>
</li>
I've googled and tried several ways, but nothing did help, so basically I've wanted to know how can I iterate over a map using forEach in angular?
Just to give more clarity my requirement is something like that: I need values to be passed to the server as key, value pair, only if I'm not wrong, suppose if I use object properties the key of the object will be fixed something like
{"key":"Content-Type","value":"application/x-www-form-urlencoded","$$hashKey":"003"}]
but my server is expecting something like
"Content-Type" => "application/x-www-form-urlencoded"
Created an plunkr edit http://plnkr.co/edit/t2g6Dl831HGyjD6uSdf3?p=preview
AngularJS 1.x does not know how to use Javascript iterators, so you'll have to convert the Map object to an Array first using Array.from().
Controller:
$scope.inputHeadersArray = Array.from($scope.inputHeaders);
View:
<li class="list-group-item" ng-repeat="header in inputHeadersArray">
{{header[0]}} : {{header[1]}}
</li>
you can use :
[...headerObj] or [...headerObj.entries()] to got two dimensions array. and iterate them.
or [...headerObj.keys()] and [...headerObj.values()] for regular array.
here are few changes in your code. http://plnkr.co/edit/gpc1mPsZrl2QVXbnWZKA?p=preview
app = angular.module('testDemo', []);
app.controller('submitCtrl',function($scope) {
$scope.header={};
$scope.inputHeaders=[];
$scope.addHeader = function() {
$scope.inputHeaders.push($scope.header);
$scope.header = {};
$scope.header.key='';
$scope.header.value='';
}
$scope.log=function(){
//alert('in log');
$scope.inputHeaders.forEach(function (key, value) {
console.log(key, value);
});
}
});
HTML:
<body ng-controller='submitCtrl'>
<div >
<input type="text" class="=form-control" ng-model="header.key" placeholder="Key">
<input type="text" class="=form-control" ng-model="header.value" placeholder="value">
<button class="btn btn-sucess" ng-click="addHeader()">Add</button>
<button class="btn btn-sucess" ng-click="log()">Log</button>
<div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="header in inputHeaders">
<!-- need to to work on this logic -->
<div ng-show="inputHeaders.length>=1">
<input type="text" ng-model="header.value" />
<input type="text" ng-model="header.key" />
</div>
</li>
</ul>
</div>
</div>
</body>

Items are not added to the collection

I have a simpe controller with its view, I am trying to add an item to the collection through ng-click, but I just started playing with angular and I don't see why the following view adding items is not working, however I hardcoded some test items and they display just fine, I would appreciate your help
<html data-ng-app>
<body>
<div data-ng-controller="ItemsController">
name : <input type="text" data-ng-model="newItem.name"/>
description : <input type="text" data-ng-model="newItem.description"/>
maintainer : <input type="text" data-ng-model="newItem.maintainer"/>
<button data-ng-click="addNew(newItem)">Add</button>
<ul>
<li data-ng-repeat="item in items">{{item.name}} {{item.description}} {{item.maintainer}}</li>
</ul>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script type="text/javascript">
function ItemsController ($scope) {
$scope.items =
[{name:'x',description:"sss",maintainer:'me'},
{name:'y',description:"aaa",maintainer:'me'}];
var addNew = function(newItem)
{
$scope.items.push(newItem);
};
}
</script>
</body>
</html>
You need to add the addNew function to the scope object. If you change the:
var addNew = function(newItem)
{
$scope.items.push(newItem);
};
into
$scope.addNew = function(newItem)
{
$scope.items.push(newItem);
};
you'll see that it should work just fine.

Categories