Javascript 使用AngularJS从表中包括和删除产品_Javascript_Html_Angularjs

Javascript 使用AngularJS从表中包括和删除产品

javascript html angularjs

Javascript 使用AngularJS从表中包括和删除产品,javascript,html,angularjs,Javascript,Html,Angularjs,如何使用AngularJS从表中包括和删除产品列表？我在选择列表中选择一个产品，并设置金额（单位：amount），然后单击add（添加）将其添加到表中 HTML: 首先，您需要创建一个控制器然后，您需要在控制器中创建一个方法，将项目和金额推送到一个数组中。通过以下方式将该功能分配给您的按钮单击：在html中，您需要循环数组，以便将记录添加到表中你的要求需要做很多事情。请检查文档，如果您不理解或遇到自己的错误，可以再次询问。 <script> ang

如何使用AngularJS从表中包括和删除产品列表？我在选择列表中选择一个产品，并设置金额（单位：amount），然后单击add（添加）将其添加到表中

HTML:

首先，您需要创建一个控制器

然后，您需要在控制器中创建一个方法，将项目和金额推送到一个数组中。通过以下方式将该功能分配给您的按钮单击：

在html中，您需要循环数组，以便将记录添加到表中

你的要求需要做很多事情。请检查文档，如果您不理解或遇到自己的错误，可以再次询问。


     <script>
     angular.module("myApp", ['ngResource'])
    .controller("myCtrl", function ($scope) {
        $scope.products = [
            {name: "apple", amount: "111"},
            { name: "orange", amount: "222"}
        ];
        $scope.addProduct = function () {
            $scope.products.push({name: $scope.myModel1, amount: $scope.myModel2, })
        }
        $scope.removeProduct = function (productToRemove) {
            var index = $scope.products.indexOf(productToRemove);
            $scope.products.splice(index, 1);
        }
    })
    </script>

    <!doctype>
<html>
<head>
    <title>Test</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <label>Select a product</label>
    <select ng-model="myModel1">
        <option>select...</option>
        <option>value 1</option>
        <option>value 2</option>
        <option>value 3</option>
        <option>value 4</option>
        <option>value 5</option>
    </select>
    <br>
    <label>Amount</label>
    <input type="text" name="amount" ng-model="myModel2">
    <button type="button" ng-click="addProduct()">ADD</button>
    <br>
    <table>
        <thead>
        <tr>
            <td>Product</td>
            <td>Amount</td>
            <td>Remove</td>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="product in products">
            <td>{{product.name}}</td>
            <td>{{product.amount}}</td>
            <td ng-click="removeProduct()"><a href="#">X</a></td>
        </tr>
        </tbody>
    </table>

</div>
</body>
</html>

angular.module（“myApp”，['ngResource']）
.controller（“myCtrl”，函数（$scope）{
$scope.products=[
{名称：“苹果”，金额：“111”}，
{名称：“橙色”，金额：“222”}
];
$scope.addProduct=函数（）{
$scope.products.push（{name:$scope.myModel1，amount:$scope.myModel2，}）
}
$scope.removeProduct=函数（productToRemove）{
var索引=$scope.products.indexOf（productToRemove）；
$范围.产品.拼接（索引，1）；
}
})
试验
选择产品
选择。。。
值1
价值2
价值3
价值4
价值5


数量
添加


产品
数量
去除
{{product.name}
{{product.amount}}

如果未添加任何产品，是否可以添加消息“尚未添加任何产品”？

table {
    width: 50%;
}

table thead {
    background-color: green;
    color: #fff;
    font-family: arial;
}

table tbody {
    background-color: #ddd;
}

     <script>
     angular.module("myApp", ['ngResource'])
    .controller("myCtrl", function ($scope) {
        $scope.products = [
            {name: "apple", amount: "111"},
            { name: "orange", amount: "222"}
        ];
        $scope.addProduct = function () {
            $scope.products.push({name: $scope.myModel1, amount: $scope.myModel2, })
        }
        $scope.removeProduct = function (productToRemove) {
            var index = $scope.products.indexOf(productToRemove);
            $scope.products.splice(index, 1);
        }
    })
    </script>

    <!doctype>
<html>
<head>
    <title>Test</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
    <label>Select a product</label>
    <select ng-model="myModel1">
        <option>select...</option>
        <option>value 1</option>
        <option>value 2</option>
        <option>value 3</option>
        <option>value 4</option>
        <option>value 5</option>
    </select>
    <br>
    <label>Amount</label>
    <input type="text" name="amount" ng-model="myModel2">
    <button type="button" ng-click="addProduct()">ADD</button>
    <br>
    <table>
        <thead>
        <tr>
            <td>Product</td>
            <td>Amount</td>
            <td>Remove</td>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="product in products">
            <td>{{product.name}}</td>
            <td>{{product.amount}}</td>
            <td ng-click="removeProduct()"><a href="#">X</a></td>
        </tr>
        </tbody>
    </table>

</div>
</body>
</html>