如何在AngularJS中创建列表？

我想做一个产品列表，我得到的产品名称和添加产品价格&其光伏和BV。如何在AngularJS中创建列表？

在这里，我在$scope保存JSON数据：

$scope.products = [ 
{"id":1,"name":'SP0300370 Nutrient Super Calcium powder',"price":21,"PV":18,"BV":18}, 
{"id":2,"name":'SP0300315 Calcium Powser with Metabolic Factors',"price":25,"PV":21,"BV":21}, 
{"id":3,"name":'SP0300372 Super Calcium Powder for Children',"price":26.5,"PV":23,"BV": 23}];

角绑定的html：

<div ng-controller="FormController"> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Products</label> 
     <input auto-complete ui-items="products" ng-model="product"> 
     <button type="button" ng-click="ProductList()" class="btn btn-success col-sm-offset-10 col-sm-2">Add Product</button> 
    </div>

这是通过我想要选择的产品形式。谢谢

来源

2016-03-07 Nouman Saif

是什么你的问题确切吗？ @Nouman Saif – Tacocat

对不起，如果我不能详细说明。你有没有在购物中心看过软件？他们在哪里输入产品名称或产品代码，软件是否列出产品及其价格？多数民众赞成我想做什么 –

<div ng-repeat="p in products" ng-click="p.selected=!p.selected" ng-class="{'selected-product':p.selected}"> 
     <input type="text" ng-model="p.name" ng-value="p.name"> 
     <input type="text" ng-model="p.price" ng-value="p.price"> 
     <input type="text" ng-model="p.PV" ng-value="p.PV"> 
</div>

是显示你的数组在angularjs中，你可以编辑。以下常规推送操作会将您的产品添加到列表中。

var newObject = {name : "A", price: 4, PV: 2323, selected: false} 
$scope.products.push(newObject)

如果你想要做更深入的操作，如果你还没有这么多的经验，我可以建议你使用像ui-grid

网格框架你看这里工作plunker

来源

2016-03-07 09:13:26 Asqan

你好。我试过这个，但我不明白你为什么用ng-Click在div上？就像它会如何工作呢？ –

如果单击元素，其属性'selected'将被更改（如果为true-> false;如果false-> true），那么您可以将其他属性分配给selected = true的产品。现在我通过例如更新我的回答为选定的产品分配新类（使用ng-class指令）。所以你可以改变所选产品的背景颜色等。 – Asqan

字面上无法理解这个:(你能解释我这一步一步吗？我在哪里必须添加他们在我的代码？ –

如何在AngularJS中创建列表？

回答

相关问题