반응형
Angular를 사용하여 객체를 배열에 푸시하는 방법JS
각도 푸시 기능을 사용하려고 하는데 작동이 안 돼요.
배열에 문자열(또는 개체)을 추가합니다.
Stack Overflow에서 기본 예를 검색했지만 찾을 수 없었습니다.
내 코드를 수정하거나 아주 기본적인 예를 쓸 수 있는 사람이 있나요?
여기 제 예가 있습니다.
HTML 코드는 다음과 같습니다.
<form ng-controller="TestController as testCtrl ng-submit="testCtrl.addText(myText)">
<input type="text" value="Lets go">
<button type="button">Add</button>
</form>
Java 스크립트 코드는 다음과 같습니다.
(function() {
var app = angular.module('test', []);
app.controller('TestController', function() {
this.arrayText = {
text1: 'Hello',
text2: 'world',
}
this.addText = function(text) {
arrayText.push(this.text);
}
});
})();
어레이의 푸시만 동작합니다.
를 만듭니다.arrayText오브젝트를 어레이 오브젝트로 설정합니다.
이렇게 해 보세요
JS
this.arrayText = [{
text1: 'Hello',
text2: 'world',
}];
this.addText = function(text) {
this.arrayText.push(text);
}
this.form = {
text1: '',
text2: ''
};
HTML
<div ng-controller="TestController as testCtrl">
<form ng-submit="addText(form)">
<input type="text" ng-model="form.text1" value="Lets go">
<input type="text" ng-model="form.text2" value="Lets go again">
<input type="submit" value="add">
</form>
</div>
확인해 주세요 - http://plnkr.co/edit/5Sx4k8tbWaO1qsdMEWYI?p=preview
컨트롤러-
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>
'밀기'는 어레이용입니다.
다음과 같은 작업을 수행할 수 있습니다.
app.filename:
(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.displaces를 표시합니다.
<!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>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
//Comments object having reply oject
$scope.comments = [{ comment: 'hi', reply: [{ comment: 'hi inside commnet' }, { comment: 'hi inside commnet' }] }];
//push reply
$scope.insertReply = function (index, reply) {
$scope.comments[index].reply.push({ comment: reply });
}
//push commnet
$scope.newComment = function (comment) {
$scope.comments.push({ comment:comment, reply: [] });
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<!--Comment section-->
<ul ng-repeat="comment in comments track by $index" style="background: skyblue; padding: 10px;">
<li>
<b>Comment {{$index}} : </b>
<br>
{{comment.comment}}
<!--Reply section-->
<ul ng-repeat="reply in comment.reply track by $index">
<li><i>Reply {{$index}} :</i><br>
{{reply.comment}}</li>
</ul>
<!--End reply section-->
<input type="text" ng-model="reply" placeholder=" Write your reply." /><a href="" ng-click="insertReply($index,reply)">Reply</a>
</li>
</ul>
<!--End comment section -->
<!--Post your comment-->
<b>New comment</b>
<input type="text" placeholder="Your comment" ng-model="comment" />
<a href="" ng-click="newComment(comment)">Post </a>
</div>위에 나와야 할 몇 가지 답변이지만, 저는 이렇게 씁니다.
또한 템플릿 내에서 컨트롤러를 선언하지 않습니다.IMO에서 신고하는 게 좋을 것 같아요.
add-text.tpl.displ.syslog
<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.module
(function() {
function myController($scope) {
$scope.arrayText = ['hello', 'world'];
$scope.addText = function(myText) {
$scope.arrayText.push(myText);
};
}
angular.module('app', [])
.controller('myController', myController);
})();
이렇게 해 보세요.분명 효과가 있을 거예요.
(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);
}
}]);
})();
고객님의 경우$scope.arrayText는 객체입니다.어레이로 초기화해야 합니다.
언급URL : https://stackoverflow.com/questions/30484653/how-to-push-object-into-an-array-using-angularjs
반응형
'programing' 카테고리의 다른 글
| 업로드 파일의 최대 크기를 설정하는 방법 (0) | 2023.03.19 |
|---|---|
| 레일 3의 JS/ERB 템플릿에서 JSON 처리 (0) | 2023.03.19 |
| Spring Boot REST API - 요청 시간 초과? (0) | 2023.03.19 |
| Oracle SQL에서의 커스텀 오더 (0) | 2023.03.19 |
| 각도:약속, 지도, 세트 및 반복자를 찾을 수 없습니다. (0) | 2023.03.19 |