Angular でオブジェクトを配列にプッシュする
この記事では、AngularJS を使用してオブジェクトを配列にプッシュする方法について説明します。これは、push() メソッドを使用して行います。
push() メソッドは、オブジェクトを既存の配列に挿入する AngularJS の組み込みメソッドです。プッシュするオブジェクトと、オブジェクトを挿入する位置のインデックスの 2つの引数を取ります。
最初の引数は、配列にプッシュされるオブジェクトであり、string、number、boolean、または null 型である必要があります。
2 番目の引数は、前に挿入された場所を基準にして、この新しい要素を挿入するインデックスです。たとえば、アップルの後に一意の文字列を挿入する場合は、1 を使用し、前に挿入する場合は、-1 を使用します。
Push API を使用すると、サーバーからクライアントにメッセージを送信できます。また、Notifications API を使用すると、ブラウザーでメッセージを受信した後にメッセージを表示できます。ただし、サーバーから Web コンピューターに直接通知を送信することはできません。
オブジェクトを Angular の配列にプッシュする手順
push() メソッドはオブジェクトまたは配列を受け入れ、コレクションの最後に挿入します。
最初のステップは、新しい空の配列を作成し、長さを 2 にすることです。これは、push() メソッドが一度に挿入できるオブジェクトまたは要素は 1つだけであるためです。
2 番目のステップは、Name と Age の 2つのプロパティを持つオブジェクトを作成することです。これは、新しい配列に挿入するオブジェクトになります。
最後に、新しく作成したオブジェクトを引数として、新しい配列の 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>
JavaScript コード：
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