如何在AngularJS中创建列表?

时间:2016-03-07 08:51:54

标签: javascript html angularjs

我想制作一个产品清单,我在其中获得产品名称和添加产品价格&他们的PV和BV。

这里我在$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}];

Angular binded 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>

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

1 个答案:

答案 0 :(得分:3)

 <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