角度材料とJavaScriptを使用したデータ入力アプリケーションの開発

Question

角度材料設計のangularjs（HTML）とjavascriptを使用してアプリケーションを作成した後、入力した入力（名前、場所、電話番号&）その下の表に格納されています。 codepen https://codepen.io/anon/pen/QOoEyW

で動作するように

リンク私は、コードを実体化するさまざまな方法を試してみました。また、テーブルには、エントリ全体を削除し、入力したエントリを編集するソリューションが必要です。私はここで提供されたコードでたくさん試しました。私は、適切code..Elseを私に提供してください提出

angular 
 
    .module('MyApp', ['ngMaterial']) 
 
    .controller('DemoCtrl', function($scope) { 
 
    $scope.dataArray = []; 
 
    $scope.add = function(data) { 
 
     $scope.dataArray.push(data); 
 
     $scope.data = null; 
 
    } 
 
    $scope.delete = function(index) { 
 
     $scope.dataArray.splice(index, 1); 
 
    } 
 
    }) 
 
    .config(function($mdThemingProvider) { 
 
    $mdThemingProvider.theme('docs-dark', 'default') 
 
     .primaryPalette('yellow') 
 
     .dark(); 
 
    });

<div ng-controller="DemoCtrl" layout="column" ng-app="MyApp"> 
 
    <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding=""> 
 
    <md-input-container> 
 
     <label>Name</label> 
 
     <input ng-model="user.name" required=""> 
 
    </md-input-container> 
 
    <md-input-container> 
 
     <label>Place</label> 
 
     <input ng-model="user.place" type="place" required=""> 
 
    </md-input-container> 
 
    <md-input-container> 
 
     <label>Email</label> 
 
     <input ng-model="user.email" type="email" required=""> 
 
    </md-input-container> 
 
    <md-input-container> 
 
     <label>Phone</label> 
 
     <input name="phoneNumber" ng-model="user.number" required="" ng-pattern="/^[0-9]{10}$/" md-maxlength="10"> 
 
    </md-input-container> 
 
    </md-content> 
 
    <section layout="column" layout-sm="column" layout-align="center center" layout-wrap> 
 
    <md-button ng-click="add(data)" class="md-raised md-primary">Click to Add</md-button> 
 
    </section> 
 
    <table> 
 
    <th width="20%">Name</th> 
 
    <th width="20%">Place</th> 
 
    <th width="30%">E-mail</th> 
 
    <th width="20%">Number</th> 
 
    <th width="10%">Remove</th> 
 
    <tr data-ng-repeat="entry in dataArray track by $index"> 
 
     <td data-ng-bind="user.name"></td> 
 
     <td data-ng-bind="user.place"></td> 
 
     <td data-ng-bind="user.email"></td> 
 
     <td data-ng-bind="user.number"></td> 
 
     <td data-ng-click="delete(dataArray.indexOf(entry))"><a style="cursor:pointer;color:red">click</a></td> 
 
    </tr> 
 
    <table>

後にデータを入力することができますが、データを消去することができませんでした提供されたコード

Answer 1

を修正します

コードにいくつか問題があります。

まず：

<md-button ng-click="add(data)" class="md-raised md-primary">Click to Add</md-button> 

それはadd(user)

セカンドあるべき時にあなたの関数呼び出しはadd(data)です：

<tr data-ng-repeat="entry in dataArray track by $index"> 

あなたはdata-ng-repeat="entry in dataArrayを持って、まだあなたがバインドするuserを使用〜にできる。それは次にentry.name、entry.emailなど

でなければなりません、あなただけのフォームフィールドをクリアするために、あなたの$scope.add関数に$scope.user = {}または$scope.user = nullを追加することができます。

固定コードページは次のとおりです。https://codepen.io/anon/pen/gXExoM