Angular JSのフォームを使用してオブジェクトを配列にプッシュする方法

私は角度があり、これを設定する際にいくつかの問題があります。既存の配列に新しいオブジェクトをプッシュするためにフォームとコントローラをどのようにセットアップしますか？Angular JSのフォームを使用してオブジェクトを配列にプッシュする方法

のindex.html：

<html ng-app="gemApp"> 
<div ng-controller="storeController as store"> 
    <h3>Gems</h3> 

    <div ng-repeat="item in store.products" | orderBy:"name"> 
    <h5>{{item.name}}</h5> 
    <h5>{{item.price | currency}}</h5> 
    </div> 
</div>

app.js：

var app = angular.module("gemApp", []); 

app.controller("storeController", storeController) 

function storeController(){ 
    this.products = gems; 
} 
var gems = [ 
    { name: 'Azurite', price: 2.95 }, 
    { name: 'Bloodstone', price: 5.95 }, 
    { name: 'Zircon', price: 3.95 } 
];

出典

2017-03-06 Dan T

あなたが期待している行動は何ですか？フォームから新しいアイテムを 'gems'に追加しますか？ – lealceldeiro

はい、私の宝石の配列に新しいオブジェクトをプッシュできる私のindex.htmlの簡単なフォーム。 –

何か試しましたか？あなたが直面している具体的な問題は何ですか？ –

これは、あなたがそれを行うことができる方法の非常に基本的なサンプルです。バリデーションなどを省略し、ここに保存されているデータはちょうどメモリに保存されていることに留意してください。これを保存するには、データベースに保存する必要があります。

スニペット

var app = angular.module("gemApp", []); 
 

 
app.controller("storeController", storeController) 
 

 
function storeController() { 
 
    var self = this; 
 
    self.products = gems; 
 
    self.current = {}; 
 

 
    this.add = function() { 
 
    gems.unshift(angular.copy(self.current)); 
 
    self.current = {}; 
 
    } 
 
} 
 
var gems = [{ 
 
    name: 'Azurite', 
 
    price: 2.95 
 
    }, 
 
    { 
 
    name: 'Bloodstone', 
 
    price: 5.95 
 
    }, 
 
    { 
 
    name: 'Zircon', 
 
    price: 3.95 
 
    } 
 
];

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div ng-app="gemApp" ng-controller="storeController as store"> 
 
    
 
    <form> 
 
    <label>Name</label> 
 
    <input type="text" ng-model="store.current.name"> 
 
    <br> 
 
    <label>Price</label> 
 
    <input type="number" ng-model="store.current.price"> 
 
    <br> 
 
    <input type="button" value="Guardar" ng-click="store.add()"> 
 
    </form> 
 

 
<h3>Gems</h3> 
 

 
    <div ng-repeat="item in store.products" | orderBy: "name"> 
 
    <h5>{{item.name}}</h5> 
 
    <h5>{{item.price | currency}}</h5> 
 
    </div> 
 
</div>

出典

2017-03-06 22:33:03 lealceldeiro

ありがとうございました！ –

あなたは大歓迎です！ :) – lealceldeiro

Angular JSのフォームを使用してオブジェクトを配列にプッシュする方法

答えて

関連する問題