mysqlからデータを取得し、それらのそれぞれをangularjsの動的テーブルに表示します

Question

だから私はmysqlデータベースを持っています。ユーザーは入力内のフィールド数を入力することができ、その数値はdb内に格納されます。ユーザーがフィールドの数（たとえば3）を定義すると、新しいフィールドが表示されます。 3つのフィールドの例では、新しい6つのフィールドが表示されます。

3つのフィールドのそれぞれに対して、2つの新しいフィールドが追加されます。 1番目に名前を入力し、2番目には数量を入力します。

そこで彼は、例えば、バナナ5、リンゴ7、オレンジのために入力することができ、我々は

num_fields持っている2.私たちのDBに

：3、

1_name：バナナ、

2_nameを：リンゴ、

3桁：オレンジ、

1：5,012 7、

3：

2 2.

私はangularjsでビューをした：

<table id="my_table"> 
      <thead> 
       <tr> 
        <th>Fruit</th> 
        <th>Qty</th> 
        <th>Price</th> 
        <th>State</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="x in [] | fields:fieldsExpr"> 
        <td>fruits</td> 
        <td ng-repeat="qty in qtys">{{qty}}</td> 
        <td> 
         <input type="number" /> 
        </td> 
        <td> 
         <input type="number" /> 
        </td> 
       </tr> 
      </tbody> 
     </table> 

そして、私のJS：

app.filter('fields', function() { 
     return function (input, total) { 
      total = parseInt(total); 
      for (var i = 0; i < total; i++) 
       input.push(i); 
      return input; 
     }; 
    }); 


app.controller('Fruit', ['$scope', '$http', function ($scope, $http) { 
    //1st we need to get number of fields 
    var numberOfFields = 'num_opts'; 
    $http({ 
     url: 'get_options.php', 
     method: 'POST', 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
     data: $.param({option: numberOfFields}) 
    }).success(function (data, status, headers, config) { 
     var fields = $.parseJSON(data); 
     $scope.fields = extras; 
    }).error(function (data, status, headers, config) { 
     console.log(status); 
    }); 
    //now we need to get other fields 
    var fieldsLen = $scope.fields; 
    $scope.qtys = []; 
    for(var i=1;i<=fieldsLen;i++){ 
     $http({ 
     url: 'get_options.php', 
     method: 'POST', 
     headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
     data: $.param({option: i}) 
    }).success(function (data, status, headers, config) { 
     var quantity = $.parseJSON(data); 
     $scope.qtys.push(quantity); 
     //array with qtys from table is retrieved successfully and we have array with '5', '7', '2' 
    }).error(function (data, status, headers, config) { 
     console.log(status); 
    }); 
    } 
}]); 

だから私は、オプションを取得するために管理ユーザーの入力に基づいて、私はテーブルにユーザー定義番号に基づいて行を表示することができました。しかし、配列から数値を設定することはできないので、テーブル行に別々に表示されます。上記のコードで、私はちょうど各行に5,7,2を印刷しました。

トリックとヒント？ :)

Answer 1

私はそれを作った。私は誰もがそれを必要とする場合、人々が将来それを見ることができるように答えを掲示します。

私たちの最初の私たちは角度フィルターを削除することができます。各オプションの列が表示されます。次にサーバー側でjsonを配列でエンコードします。私たちのコントローラで今

echo json_encode([ 
    'id' => $opt_name,//we can get any data we want from server 
    'qty' => $value, 
    'name' => $value2 
]); 

：

app.controller('Extras', ['$scope', '$http', '$routeParams', '$location', 'passData', 'pageContent', function ($scope, $http, $routeParams, $location, passData, pageContent) { 
//1st we need to get number of fields 
var numberOfFields = 'num_opts'; 
$http({ 
    url: 'get_options.php', 
    method: 'POST', 
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
    data: $.param({option: numberOfFields}) 
}).success(function (data, status, headers, config) { 
    var fields = $.parseJSON(data); 
    $scope.fields = fields; 
}).error(function (data, status, headers, config) { 
    console.log(status); 
}); 
    var extrasLen = $scope.data.extras; 
    //we define array to store data from server that we json_encode 
    $scope.extras = []; 
    for (var i = 1; i <= extrasLen; i++) { 
     $http({ 
      url: 'get_table_fields.php', 
      method: 'POST', 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
      data: $.param({option: i}) 
     }).success(function (data, status, headers, config) { 
      //we add every new data to array 
      $scope.extras.push(data); 
     }).error(function (data, status, headers, config) { 
      console.log(status); 
     }); 
    } 
}]); 

今我々の見解では、我々は簡単な{{extra.property}}

<table id="my_table"> 
     <thead> 
      <tr> 
       <th>Fruit</th> 
       <th>Qty</th> 
       <th>Price</th> 
       <th>State</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="extra in extras">//show rows based on extras array 
       <td>{{extra.name}}</td>//we can access data from extras 
       <td>{{extra.qty}}</td> 
       <td> 
        <input type="number" /> 
       </td> 
       <td> 
        <input type="number" /> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

でデータを取得することができ、クエリが実行されたときに、私たちはこれを作ってあげます