如何爲動態按鈕創建動態ID？

我能夠與增量和縮減器選項來創建一個點擊數動態按鈕，但我無法創建由於這些按鈕都沒有得到增加或減少其他按鈕的動態ID。目前只有第一個按鈕被減少/增加，即使點擊其他按鈕。如何爲動態按鈕創建動態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; 
}

來源

2017-07-06 HebleV

這是我的工作版本，使用的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>

來源

2017-07-06 21:28:11 James

謝謝隊友。我只是錯過了小指數。 – HebleV

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

來源

2017-07-06 21:45:30

如何爲動態按鈕創建動態ID？

回答

相關問題