I am trying to do use the angular push function but it is not working.
I want to add strings (or objects) into an array.
I searched for basic examples here at Stack Overflow but I couldn't find it.
Can anyone correct my code or write a very basic example?
Here is my example.
This is the HTML code:
<form ng-controller="TestController as testCtrl ng-submit="testCtrl.addText(myText)">
<input type="text" value="Lets go">
<button type="button">Add</button>
</form>
This is the Java Script code:
(function() {
var app = angular.module('test', []);
app.controller('TestController', function() {
this.arrayText = {
text1: 'Hello',
text2: 'world',
}
this.addText = function(text) {
arrayText.push(this.text);
}
});
})();
This question is related to
javascript
arrays
angularjs
function
Please check this - http://plnkr.co/edit/5Sx4k8tbWaO1qsdMEWYI?p=preview
Controller-
var app= angular.module('app', []);
app.controller('TestController', function($scope) {
this.arrayText = [{text:'Hello',},{text: 'world'}];
this.addText = function(text) {
if(text) {
var obj = {
text: text
};
this.arrayText.push(obj);
this.myText = '';
console.log(this.arrayText);
}
}
});
HTML
<form ng-controller="TestController as testCtrl" ng-submit="testCtrl.addText(testCtrl.myText)">
<input type="text" ng-model="testCtrl.myText" value="Lets go">
<button type="submit">Add</button>
<div ng-repeat="item in testCtrl.arrayText">
<span>{{item}}</span>
</div>
</form>
You should try this way. It will definitely work.
(function() {
var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope) {
$scope.myText = "Object Push inside ";
$scope.arrayText = [
];
$scope.addText = function() {
$scope.arrayText.push(this.myText);
}
}]);
})();
In your case $scope.arrayText is an object. You should initialize as a array.
A couple of answers that should work above but this is how i would write it.
Also, i wouldn't declare controllers inside templates. It's better to declare them on your routes imo.
add-text.tpl.html
<div ng-controller="myController">
<form ng-submit="addText(myText)">
<input type="text" placeholder="Let's Go" ng-model="myText">
<button type="submit">Add</button>
</form>
<ul>
<li ng-repeat="text in arrayText">{{ text }}</li>
</ul>
</div>
app.js
(function() {
function myController($scope) {
$scope.arrayText = ['hello', 'world'];
$scope.addText = function(myText) {
$scope.arrayText.push(myText);
};
}
angular.module('app', [])
.controller('myController', myController);
})();
var app = angular.module('myApp', []);_x000D_
app.controller('myCtrl', function ($scope) {_x000D_
_x000D_
//Comments object having reply oject_x000D_
$scope.comments = [{ comment: 'hi', reply: [{ comment: 'hi inside commnet' }, { comment: 'hi inside commnet' }] }];_x000D_
_x000D_
//push reply_x000D_
$scope.insertReply = function (index, reply) {_x000D_
$scope.comments[index].reply.push({ comment: reply });_x000D_
}_x000D_
_x000D_
//push commnet_x000D_
$scope.newComment = function (comment) {_x000D_
$scope.comments.push({ comment:comment, reply: [] });_x000D_
}_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>_x000D_
<div ng-app="myApp" ng-controller="myCtrl">_x000D_
_x000D_
<!--Comment section-->_x000D_
<ul ng-repeat="comment in comments track by $index" style="background: skyblue; padding: 10px;">_x000D_
<li>_x000D_
<b>Comment {{$index}} : </b>_x000D_
<br>_x000D_
{{comment.comment}}_x000D_
<!--Reply section-->_x000D_
<ul ng-repeat="reply in comment.reply track by $index">_x000D_
<li><i>Reply {{$index}} :</i><br>_x000D_
{{reply.comment}}</li>_x000D_
</ul>_x000D_
<!--End reply section-->_x000D_
<input type="text" ng-model="reply" placeholder=" Write your reply." /><a href="" ng-click="insertReply($index,reply)">Reply</a>_x000D_
</li>_x000D_
</ul>_x000D_
<!--End comment section -->_x000D_
_x000D_
_x000D_
<!--Post your comment-->_x000D_
<b>New comment</b>_x000D_
<input type="text" placeholder="Your comment" ng-model="comment" />_x000D_
<a href="" ng-click="newComment(comment)">Post </a>_x000D_
</div>'Push' is for arrays.
You can do something like this:
app.js:
(function() {
var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope) {
$scope.myText = "Let's go";
$scope.arrayText = [
'Hello',
'world'
];
$scope.addText = function() {
$scope.arrayText.push(this.myText);
}
}]);
})();
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div>
<form ng-controller="myController" ng-submit="addText()">
<input type="text" ng-model="myText" value="Lets go">
<input type="submit" id="submit"/>
<pre>list={{arrayText}}</pre>
</form>
</div>
</body>
</html>
Source: Stackoverflow.com