Angular의 배열에 객체 푸시
이 기사에서는 AngularJS를 사용하여 객체를 배열로 푸시하는 방법에 대해 설명합니다. push() 메서드를 사용하여 이 작업을 수행합니다.
push() 메소드는 기존 배열에 객체를 삽입하는 AngularJS의 내장 메소드입니다. 푸시할 객체와 객체를 삽입할 위치의 인덱스라는 두 개의 인수가 필요합니다.
첫 번째 인수는 배열로 푸시될 개체이며 문자열, 숫자, 부울 또는 null 유형이어야 합니다.
두 번째 인수는 이전에 삽입된 위치를 기준으로 이 새 요소를 삽입할 인덱스입니다. 예를 들어 an apple 뒤에 고유한 문자열을 삽입하려면 1을 사용하고 앞에 삽입하려는 경우 -1을 사용합니다.
푸시 API를 사용하면 서버에서 클라이언트로 메시지를 보낼 수 있고 알림 API를 사용하면 메시지가 브라우저에서 수신된 후 표시할 수 있습니다. 그러나 서버에서 웹 컴퓨터로 직접 알림을 보낼 수는 없습니다.
Angular에서 객체를 배열로 푸시하는 단계
push() 메서드는 개체 또는 배열을 수락하고 컬렉션의 끝에 삽입합니다.
첫 번째 단계는 길이가 2인 빈 배열을 새로 만드는 것입니다. push() 메서드는 한 번에 하나의 개체 또는 요소만 삽입할 수 있기 때문입니다.
두 번째 단계는 Name 및 Age라는 두 가지 속성이 있는 개체를 만드는 것입니다. 이것은 우리가 우리의 새 배열에 삽입하고자 하는 객체가 될 것입니다.
마지막으로 새로 생성된 객체를 인수로 사용하여 새 배열의 push() 메서드를 호출해야 합니다. push() 메소드는 이 객체를 새 배열의 마지막 인덱스에 삽입합니다. 이 경우에는 0이 됩니다.
Angular에서 객체를 배열로 푸시하는 예
AngularJS를 사용하여 객체를 배열로 푸시하는 방법에 대한 더 나은 아이디어를 얻기 위해 위에서 언급한 단계의 도움으로 이해할 수 있는 예를 논의해 보겠습니다.
HTML 코드:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demo">
<form ng-controller="Sample as test" ng-submit="test.addText(test.myText)">
<input type="text" ng-model="test.myText" value="food">
<button type="submit">Add</button>
<div ng-repeat="item in test.arrayadd">
<span>{{item}}</span>
</div>
</form>
</body>
</html>
자바스크립트 코드:
var app = angular.module('demo', []);
app.controller('Sample', function($scope) {
this.arrayadd = [{
text: 'Name',
}, {
text: 'Age'
}, ]
this.addText = function(text) {
if (text) {
var obj = {
text: text
};
this.arrayadd.push(obj);
this.myText = '';
}
}
});
여기를 클릭 위에서 언급한 코드의 라이브 데모를 확인하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook