ng-model輸入類型的值= ng-repeat中的數字AngularJS

我嘗試從輸入號碼中console.log表中的每個值，但我只收到10 - script.js中分配的值。我不想console.log這個值，你在輸入數字中選擇。我plunker：http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview ng-model輸入類型的值= ng-repeat中的數字AngularJS

代碼：

<table class="table table-bordered table-striped"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>System </th> 
      <th>Actions</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="n in data"> 
      <td style="word-break:break-all;">{{n.name}}</td> 
      <td>{{n.system}}</td> 
      <td> 
       <input class="form-control input-sm" type="number" 
         name="input" ng-model="value" min="0" max="100"> 
      </td> 
      <td> 
       <button ng-click="postvalue()">Value</button> 
      </td> 
     </tr> 
    </tbody> 
</table>

感謝提前答案！

來源

2017-08-29 bafix2203

值屬性添加到您的每一個對象，並且您輸入綁定當前對象的值：'n.value'。 –

你可以添加一個屬性到你的ng重複像n.value。現在你的陣列中的每個對象將包含一個值屬性，它會一直保持輸入值

// Code goes here 
 
var app = angular.module('app', []); 
 
app.controller('FirstCtrl', function($scope) { 
 
    $scope.data = [{ 
 
     "name": "Tiger Nixon", 
 
     "system": "System Architect" 
 
    }, { 
 
     "name": "Tiger Nixon", 
 
     "system": "System Architect" 
 
    }, { 
 
     "name": "Tiger Nixon", 
 
     "system": "System Architect" 
 
    }, { 
 
     "name": "Tiger Nixon", 
 
     "system": "System Architect" 
 
    }, { 
 
     "name": "Tiger Nixon", 
 
     "system": "System Architect" 
 
    }]; 
 
    $scope.postvalue = function(n) { 
 
     console.log(n.value); 
 
    }; 
 
});

<html ng-app="app" ng-cloak> 
 

 
<head> 
 
    <style> 
 
     [ng\:cloak], 
 
     [ng-cloak], 
 
     [data-ng-cloak], 
 
     [x-ng-cloak], 
 
     .ng-cloak, 
 
     .x-ng-cloak { 
 
      display: none !important; 
 
     } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body ng-controller="FirstCtrl as vm"> 
 
    <table class="table table-bordered table-striped"> 
 
     <thead> 
 
      <tr> 
 
       <th>Name 
 
        <th>System </th> 
 
        <th>Actions</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="n in data"> 
 
       <td style="word-break:break-all;">{{n.name}}</td> 
 
       <td style="width:35px;">{{n.system}}</td> 
 
       <td> 
 
        <input class="form-control input-sm" type="number" 
 
          name="input" ng-model="n.value" min="0" 
 
          max="100" style="width:55px;"> 
 
       </td> 
 
       <td> 
 
        <button ng-click="postvalue(n)">Value</button> 
 
       </td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

來源

2017-08-29 06:48:32 Vivz

謝謝，你有沒有想過在每個輸入中提前分配10個值？ – bafix2203

好的，我使用ng-init – bafix2203

是的，您可以使用ng-init將您的輸入初始化爲10或循環遍歷js中的對象數組以創建一個將被初始化爲10的值屬性。 – Vivz

您需要通過ng-model="value"您postValue函數中象下面這樣：

// Code goes here 
 

 
var app = angular.module('app', []); 
 
app.controller('FirstCtrl', function($scope) { 
 
    
 
    $scope.data=[ 
 
      { 
 
       "name" : "Tiger Nixon", 
 
       "system" : "System Architect" 
 
      }, 
 
      { 
 
       "name" : "Tiger Nixon", 
 
       "system" : "System Architect" 
 
      }, 
 
      { 
 
       "name" : "Tiger Nixon", 
 
       "system" : "System Architect" 
 
      }, 
 
      { 
 
       "name" : "Tiger Nixon", 
 
       "system" : "System Architect" 
 
      }, 
 
      { 
 
       "name" : "Tiger Nixon", 
 
       "system" : "System Architect" 
 
      } 
 
     ]; 
 
     $scope.value = 10; 
 
    $scope.postvalue = function(value){ 
 
     console.log(value); 
 
    }; 
 
    
 
     
 

 
     
 
});

<html ng-app="app" ng-cloak> 
 

 
<head> 
 
    <style> 
 
    [ng\:cloak], 
 
    [ng-cloak], 
 
    [data-ng-cloak], 
 
    [x-ng-cloak], 
 
    .ng-cloak, 
 
    .x-ng-cloak { 
 
     display: none !important; 
 
    } 
 
    </style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 

 
    <script src="script.js"></script> 
 

 

 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
</head> 
 

 
<body ng-controller="FirstCtrl as vm"> 
 
    <table class="table table-bordered table-striped"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name 
 
      <th>System 
 
      </th> 
 
      <th>Actions</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="n in data"> 
 
     <td style="word-break:break-all;">{{n.name}}</td> 
 

 
     <td style="width:35px;">{{n.system}}</td> 
 
     <td> 
 
      <input class="form-control input-sm" type="number" name="input" ng-model="value" min="0" max="100" style="width:55px;"> 
 
     </td> 
 
     <td> 
 
      <button ng-click="postvalue(value)">Value</button> 
 
     </td> 
 

 
     </tr> 
 
    </tbody> 
 
    </table> 
 

 
</body> 
 

 
</html>

來源

2017-08-29 06:49:12 Rahul

是的，因爲你已經設置了$scope.value爲10.如果您想將文本框初始值設置爲10，則使用ng-init。

<input class="form-control input-sm" type="number" name="input" 
     ng-model="value" ng-init="value=10" min="0" max="100">

來源

2017-08-29 06:50:57 Nikita

你可以嘗試以下操作：在HTML文件中的變化它：

<td><button ng-click="postvalue(n)">Value</button></td> 



    $scope.postvalue = function(n){ 
    $scope.data.filter(function(data){ 
    if(n.name==data.name){ 
    console.log("Name:"+n.name); 
    return n.name; 
    } 
    });

願這幫助你：

來源

2017-08-29 06:51:59

ng-model輸入類型的值= ng-repeat中的數字AngularJS

回答

相關問題