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

Question

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

Here is the plunker

当您单击+ 图标内容时，会在“管理投资组合”部分添加一个增量器/减量器按钮。我尝试了 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

 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;
        };
    }]);

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

Answer 2

纯粹谈到 Web 标准 HTML/CSS/JS-ECMA，我相信使用数据属性是专为您的用例而构建的。换句话说，使用data-whatever="myIdentifierForWhateverProperty"，然后使用香草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>