如何使用Angular JS中的窗体将对象插入到数组中

我是新来的angular，并且在设置时遇到了一些麻烦。如何设置表单和控制器以将新对象推入现有数组？如何使用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中的一个简单表单，可以将新对象推送到我的gems数组中。 –

你尝试过什么吗？你面临的具体问题是什么？ –

这是你如何能做到这一点非常基本的样本。请记住，我省略了验证等，并且此处存储的数据只保存在内存中。为了及时存储，必须将其保存到数据库中。

片段

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中的窗体将对象插入到数组中

回答

相关问题