value store in Angularjs Objects and outputting in View

Question

I have a form. It contains Name , quantity & price . I want to get input from form and store in Angularjs Objects. Then i have to output to View the whole array of angular objects. I tried with Angular Array it worked but to show in table ng-repeat not work . So i have to use Objects and output in table

CODE Form

<div class="leftDev">   

    <h1>Enter New Product</h1>
    <Table>
        <tr>
            <td><label for="name">Name:</label></td>
            <td><input type="text" name="naam" ng-model="naam"> </td>
        </tr>

        <tr>
            <td><label for="quantity">Quantity:</label></td>
            <td><input type="number" name="quantity" ng-model="quantity"> </td>
        </tr>

        <tr>
            <td><label for="price">Price:</label></td>
            <td><input type="text" name="price" ng-model="price"> </td>
        </tr>
        <tr>
            <td></td>
            <td><button ng-click='push()'>ADD</button></td>
        </tr>
    </Table>

OUTPUT Table

<div class="rightDev">
    <table border="2">
        <tr>
            <th>
                Name
            </th>
            <th>
                Quantity
            </th>
        </tr>
        <tr ng-repeat=""   >
            <td >
                
            </td>

            <td >
              
            </td>
        </tr>
    </table>
</div>

Script

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script> 
    var myApp = angular.module("myApp",[]);
    myApp.controller('myCtrl',function($scope){

       $scope.items={
           name:"jay",quantity:"100",price:"200"
       };
       
        $scope.push = function(){
            $scope.items.name.push($scope.naam);
            $scope.items.quantity.push($scope.quantity);
            $scope.items.price.push($scope.price);
        }
    })    
</script>

So , please show me right way to do it.

georgeawg · Accepted Answer · 2021-04-05 06:44:23Z

1

myApp.controller('myCtrl',function($scope){

    $scope.list = [];

    $scope.item = {
       name:"jay",quantity:"100",price:"200"
    };
   
    $scope.push = function(){
        $scope.list.push($scope.item);
        $scope.item = {};
    }
})

<h1>Enter New Product</h1>
<Table>
    <tr>
        <td><label for="name">Name:</label></td>
        <td><input type="text" name="name" ng-model="item.name"> </td>
    </tr>

    <tr>
        <td><label for="quantity">Quantity:</label></td>
        <td><input type="number" name="quantity" ng-model="item.quantity"> </td>
    </tr>

    <tr>
        <td><label for="price">Price:</label></td>
        <td><input type="text" name="price" ng-model="item.price"> </td>
    </tr>
    <tr>
        <td></td>
        <td><button ng-click='push()'>ADD</button></td>
    </tr>
</Table>

<div class="rightDev">
    <table border="2">
        <tr>
            <th>
                Name
            </th>
            <th>
                Quantity
            </th>
        </tr>
        <tr ng-repeat="obj in list"   >
            <td >
                {{obj.name}}
            </td>

            <td >
                {{obj.quantity}}
            </td>
        </tr>
    </table>
</div>

answered Apr 5, 2021 at 6:44

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

1 Comment

Jaykumar Over a year ago

it worked. Thanks georgeawg for giving the answer.

Collectives™ on Stack Overflow

value store in Angularjs Objects and outputting in View

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related