angularjsのIDを追加する情報のリストを作成します

名前、仕事を入力する情報のリストを作成したいと思います。これらの入力を持つフォームです。 SAVEボタンをクリックすると名前と作業を行い、それがリストに追加されます。それらを表示します。しかし、私は毎回IDを追加したい。これどうやってするの？ここ angularjsのIDを追加する情報のリストを作成します

は私plunkerです： https://plnkr.co/edit/VDYYrxk8Bz5KIoI0HFV4?p=preview

HTML：

<body ng-controller='MyController'> 

    <!-- <button ng-click='toggleForm()'>Upload</button> --> 

    <div> 
     <table class='table'> 
      <tr> 
       <th>Title</th> 
       <th>Work</th> 
      </tr> 
      <tr ng-repeat='info in infos'> 
       <td>{{info.name}}</td> 
       <td>{{info.work}}</td> 
      </tr> 
     </table> 
    </div> 
    <form class='form'> 
     <div class='form-group'> 
      <label>Name</label> 
      <input class='form-control' type="text" ng-model='info.name'> 
     </div> 
     <div class='form-group'> 
      <label>Work</label> 
      <input class='form-control' type="text" ng-model='info.work'> 
     </div> 
     <div class='form-group'> 
      <button class='btn btn-primary' ng-click='addInfos()'>Save</button> 
     </div> 
    </form> 
    </body>

スクリプト::

手始めに

angular 
.module('app') 
.controller('MyController', function($scope){ 

    // $scope.displayForm = false; 
    // $scope.toggleForm = function(){ 
    //  $scope.displayForm = !$scope.displayForm; 
    // }; 
    $scope.infos = []; 
    // var currIndex = 0; 
    $scope.addInfos = function() { 
     $scope.infos.push({ 
      name: '', 
      work: '' 
      // id: currIndex++ 
     }); 
     // $scope.infos.push(obj.info); 

    }; 
})

出典

2016-04-06 Mislam

、あなたのplunkrは角2ライブラリに持ち込むが、あなたれますAngular 1アプリを作成しています私はそこから始めるだろう。 – Antiga

$scope.addInfos = function() { 
     $scope.infos.push({ 
      name: $scope.info.name, 
      work: $scope.info.work, 
      id: $scope.infos.length + 1 // assuming you want ids to start with 1 
     }); 
     $scope.info = {}; // to clear the form fields once an input is pushed to the array 
    };

出典

2016-04-06 18:21:08 war1oc

ありがとう – Mislam

angularjsのIDを追加する情報のリストを作成します

答えて

関連する問題