值存储在 Angularjs 个对象中并在视图中输出

Question

我有一个表格。它包含名称、数量和价格。我想从表单中获取输入并存储在 Angularjs 对象中。然后我必须输出以查看 angular 对象的整个数组。我尝试使用 Angular Array 它有效但显示在 table ng-repeat 中无效。所以我必须在 table

中使用对象和输出

代码表格

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

输出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 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>

所以，请告诉我正确的方法。

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

值存储在 Angularjs 个对象中并在视图中输出

value store in Angularjs Objects and outputting in View

javascript

angularjs

forms

object

angularjs-scope