How do I make a list in AngularJS?

Question

I want to make a products list where I get the products name and Add Products price & their PV And BV.

Here i saved JSON Data in $scope :

$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>

This is the form Through Which I want to make The Products selectable. Thank you

I am sorry If I can't elaborate exactly. Have you seen a software at Shopping centers and etc? where they enter a product name or code for products and the software enlists the products and their prices? thats What I want to make — Nouman Saif
– Nouman Saif, Commented Mar 7, 2016 at 9:03

Asqan · Accepted Answer · 2016-03-07 12:08:48Z

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>

is to show your array in angularjs and you can edit. And the following normal push operation will add your product to the list.

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

If you want to do much deeper operations and if you have not so much experience, i can propose you to use a grid framework like ui-grid

You see here a working plunker

edited Mar 7, 2016 at 12:08

answered Mar 7, 2016 at 9:13

Asqan

4,51912 gold badges63 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nouman Saif Over a year ago

Hello. I tried this but I can't understand Why have you used the ng-Click on a div? Like how would it work then?

Asqan Over a year ago

if the element is clicked, its property selected will be changed (if true->false;if false->true) so you can assign other properties to products with selected=true. Now i updated my answer by e.g. assigning new class for selected products (using ng-class directive). so you can change background-color of selected product etc.

Nouman Saif Over a year ago

Literally Can't understand this :( Can You explain me this Step by step? And Where do I have to add them in my code?

Asqan Over a year ago

updated my answer with a plunker. Just check that out and try to read the documentations of angular

Nouman Saif Over a year ago

Doesn't Accept new data

Collectives™ on Stack Overflow

How do I make a list in AngularJS?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related