Working with forms in angularjs (add to list, remove, list search)?

D

Dennis2015-07-11 23:45:58

JavaScript

Dennis, 2015-07-11 23:45:58

Good day to all!
there is this topic:

<!DOCTYPE html>
<html ng-app='store'>
<head>
    <title>NG</title>
         
</head>
 
<body>
 
<div id='products' ng-controller="ProductController as products">
     
    <button type="button" ng-click='products.toggleProducts()'>Products</button>
    <p>Number of products: {{products.number}}</p>
     
    <form name='addProduct' ng-submit='products.addProduct()'>
        <input type="plain/text" placeholder='Enter name' ng-model='products.new_product_name'/>
        <input type="plain/text" placeholder='Enter price' ng-model='products.new_product_price' />
        <input type="submit" value='Add' />          
    </form>
     
    <div id='products-list'>
        <div ng-repeat='product in products.products'>
            <ul>
                <li>{{ product.name }}: {{ product.price | currency }}</li>
            </ul>
        </div>
         
        <ul>
            <li>{{ products.new_product_name }}: {{ products.new_product_price | currency }}</li>
        </ul>
         
    </div>
 
</div>
 
<div id='customers' ng-controller="CustomerController as customers">
     
    <button type="button" ng-click='customers.toggleCustomers()'>Customers</button>
    <p>Number of customers: {{customers.number}}</p>
     
    <div id='customers-list'>
        <div ng-repeat='customer in customers.customers'>
            <ul>
                <li>Customer: {{ customer.name | uppercase }}, city: {{ customer.city }},
                    age: {{ customer.age }} - <img ng-src='{{ customer.ava }}' /></li>
            </ul>
        </div>
    </div>
 
</div>
 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>
</body>
 
</html>

and JS:

(function() {
    var app = angular.module('store', []);
 
    app.controller("ProductController", function() {
        this.products = [
            {name: '1', price: 2.0},
            {name: '2', price: 2.5},
            {name: '3', price: 5.8}
        ];
         
        this.number = this.products.length;
         
        this.toggleProducts = function() {
            $('#products-list').slideToggle();
        };
 
        this.addProduct = function(????????) {
            this.products.push(???????);
        };
 
    });
 
    app.controller("CustomerController", function() {
        this.customers = [
            {name: 'Bob', city: 'Kiev', age: 40, ava: 'bob.jpg'},
            {name: 'Sue', city: 'Kiev', age: 30, ava: 'sue.jpg'},
            {name: 'Dan', city: 'Kiev', age: 25, ava: 'dan.jpg'}
        ];
         
        this.number = customers.length;
         
        this.toggleCustomers = function() {
            $('#customers-list').slideToggle();
        };         
    });
 
     
})();

Tell me, please, how to implement: - adding an
element to the list? ..
- deleting from the list? ..
- searching by position in the list? .. I can’t figure out what to send to addProduct and to push ... and in html I don’t like how I made the add list ... but I tried other options, so nothing good came out - the position under ng-repeat always fell already entered product... Thank you!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vitaly Kuznetsov, 2015-07-16
@BbFlaMe

Can it be like this

<input type="plain/text" placeholder='Enter name' ng-model='products.new.name'/>
<input type="plain/text" placeholder='Enter price' ng-model='products.new.price' />

this.addProduct = function() {
    this.products.push(this.new);
    this.new = {price:'', name:''};
};

You can use $index to remove

<ul>
    <li>
        {{ products.new_product_name }}: {{ products.new_product_price | currency }}
        <span ng-click="products.remove($index)">удалить</span>
    </li>
</ul>

this.remove = function($index){
     this.products.splice($index, 1); 
}

Well, with a position, everything seems to become simple when you know by $index