Question

我能够创建一个带有增量器和减量器选项的onlick动态按钮，但是我无法为其他按钮创建动态id，因为这些按钮没有增加或减少。目前，即使单击其他按钮，也只有第一个按钮会递减/递增。

单击+图标内容并在管理投资组合部分添加增量/减量按钮。我尝试过在Stack Overflow上定义的不同解决方案，但它们似乎无法在这里工作。

             <table>
                <thead>
                    <tr>
                        <th>STOCK</th>
                        <th>PRICE</th>
                        <th>SHARES</th>
                        <th>WEIGHT</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="stock in stocksArray" class="portfoliokey">
                        <td>{{stock.key}}</td>
                        <td class="portfoliovalue">{{"&#x20b9;" + stock.value}}</td>
                        <td>
                            <input type="button" onclick="decrementValue()" value="-">
                            <input type="button" id="number" value="0" />
                            <input type="button" onclick="incrementValue()" value="+" />
                        </td>
                        <td></td>
                    </tr>
                </tbody>
            </table>

脚本

   function incrementValue() {
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}

function decrementValue() {
    value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value--;
    document.getElementById('number').value = value;
}

Answer 1

这是我的工作版本，使用id中的索引。

https://plnkr.co/edit/lSteH17zNL7gMHqQQCSI?p=preview

＆＃13;

 var app = angular.module('myApp', []);


    // var app = angular.module('myApp', []);

    app.controller('stockCtrl', function($scope, $http) {
        $http.get('data.json').then(function(response) {
            $scope.stocksArray = [];
            var indexes = [];
            $scope.stocks = response.data.price;
            $scope.addToTable = function(key, value, index) {
                var mystock = {};
                mystock.key = key;
                mystock.value = value;
                mystock.index = index;
                if (indexes.indexOf(index) == -1) {
                    indexes.push(index);
                    $scope.stocksArray.push(mystock);
                }
            };
            $scope.incrementValue = function( index ) {
                var value = parseInt(document.getElementById('number' + index).value, 10);
                value = isNaN(value) ? 0 : value;
                value++;
                document.getElementById('number' + index).value = value;
            };
        
            $scope.decrementValue = function( index ) {
                value = parseInt(document.getElementById('number' + index).value, 10);
                value = isNaN(value) ? 0 : value;
                value--;
                document.getElementById('number' + index).value = value;
            };

        });

    });

    app.filter('objLimitTo', [function() {
        return function(obj, limit) {
            if (obj) {
                var keys = Object.keys(obj);
                if (keys.length < 1) {
                    return [];
                }
            }

            var result = {},
                count = 0;
            angular.forEach(keys, function(key) {
                if (count >= limit) {
                    return false;
                }
                result[key] = obj[key];
                count++;
            });
            return result;
        };
    }]);

＆＃13;

<!DOCTYPE html>
<html ng-App="myApp">

  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
    <script src="script.js"></script>
   
  </head>

  <body>
 
  <div ng-controller="stockCtrl">
        <section class="pickstocks">
            <label class="basiclabel">Pick Stocks</label>
            <div class="infoone">
                <p>Showing matching stocks</p>
                <button>Apply Filters</button>
            </div>
            <div class="stockpage">
                <ul id="nav">
                    <li ng-repeat="(key,value) in stocks | objLimitTo:8 track by $index">
                        <span class="keyvalue"> {{key}} </span>
                        <span class="keyvalue">{{"&#x20b9;" + value}}</span>
                        <span class="fa fa-plus plus" ng-click="addToTable(key, value, $index)"></span>
                    </li>
                </ul>
            </div>
        </section>
        <section class="pickstocks">
            <label class="basiclabel">Manage Portfolio</label>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>STOCK</th>
                            <th>PRICE</th>
                            <th>SHARES</th>
                            <th>WEIGHT</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="stock in stocksArray" class="portfoliokey">
                            <td>{{stock.key}}</td>
                            <td class="portfoliovalue">{{"&#x20b9;" + stock.value}}</td>
                            <td>
                                <input type="button" id="num1" ng-click="decrementValue( stock.index )" value="-">
                                <input type="button" id="number{{ stock.index }}" value="0" />
                                <input type="button" ng-click="incrementValue( stock.index )" value="+" />
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
  </body>

</html>

＆＃13;

Answer 2

纯粹谈到Web标准HTML / CSS / JS-ECMA，我认为使用数据属性是专为您的用例而构建的。换句话说，使用data-whatever="myIdentifierForWhateverProperty"然后使用vanilla JS逻辑if(document.getElementsByTagName("button")[iterateOverEachOne]){do this} else {do that};。

Using data attributes

HTML5在设计时应考虑到可扩展性与特定元素相关联但不需要任何定义含义。 data- *属性允许我们存储额外的信息标准的，语义的HTML元素，没有其他的黑客攻击非标准属性，DOM上的额外属性或 Node.setUserData（）。
<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

如何为动态按钮创建动态ID？

2 个答案: