2016-04-15 5 views
0

多次元配列を使用して、初期配列にない他のフィールドをテーブルに追加するフォームフィールドを作成しています。データを入力した後にこのフォームフィールドの値を印刷すると、私は定義されません。ここでng-model配列からの名前変更時に値が定義されていません

ここで配列

$scope.benefits = { 
       "Emergency services": [ 
        "Emergency room care", 
        "Ambulance service", 
        "Urgent care centers/facilities" 
       ], 
       "Laboratory services": [ 
        "Lab tests & X-ray services", 
        "Imaging/diagnostics (e.g., MRI, CT scan, PET scan" 
       ], 
      }; 

は、あなたの配列宣言でplunkerコード https://plnkr.co/edit/DQlXnX?p=preview

+1

私はそれがあなたのタイプミスの問題だと思います。あなたは\t ** $ scope.benefitを印刷しました** - ** $ scope.benefits ** –

+0

$ scope.benefitsは元の配列を出力しますが、元の配列と追加したフィールドを印刷する必要があります – dadidaochieng

+0

tdタグのng-model? –

答えて

0

変更されています。 Plunkrを参照してください。 https://plnkr.co/edit/kVgKIM?p=preview

\t \t (function() { 
 
\t \t \t 'use strict'; 
 

 
\t \t \t angular.module('testBenefits', ['ngRoute']) 
 
\t \t \t .controller('benefitsCtrl', ['$scope', function ($scope) { 
 

 
\t \t \t \t $scope.benefits = { 
 
\t \t \t \t \t "Emergency services": { 
 
\t \t \t \t   "Emergency room care":{ 
 
\t \t \t \t   'name':'', 
 
\t \t \t \t   'limit':'', 
 
\t \t \t \t   'dlimit':'' 
 
\t \t \t \t   }, 
 
\t \t \t \t   "Ambulance service":{ 
 
\t \t \t \t   'name':'', 
 
\t \t \t \t   'limit':'', 
 
\t \t \t \t   'dlimit':'' 
 
\t \t \t \t   }, 
 
\t \t \t \t   "Urgent care centers/facilities":{ 
 
\t \t \t \t   'name':'', 
 
\t \t \t \t   'limit':'', 
 
\t \t \t \t   'dlimit':'' 
 
\t \t \t \t   } 
 
\t \t \t \t  }, 
 
\t \t \t \t  "Laboratory services": { 
 
\t \t \t \t   "Lab tests & X-ray services":{ 
 
\t \t \t \t   'name':'', 
 
\t \t \t \t   'limit':'', 
 
\t \t \t \t   'dlimit':'' 
 
\t \t \t \t   }, 
 
\t \t \t \t   "Imaging/diagnostics (e.g., MRI, CT scan, PET scan":{ 
 
\t \t \t \t   'name':'', 
 
\t \t \t \t   'limit':'', 
 
\t \t \t \t   'dlimit':'' 
 
\t \t \t \t   } 
 
\t \t \t \t  }, 
 
\t \t \t \t }; 
 

 
\t \t \t \t $scope.showItems = function() { 
 
\t \t \t \t \t console.log($scope.benefits); 
 
\t \t \t \t }; 
 
\t \t \t \t 
 
\t \t \t }]); 
 

 
\t \t })();
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.4/angular-route.min.js"></script> 
 
\t <script type="text/javascript"> 
 

 
\t </script> 
 
\t <title>Testing Benefits</title> 
 
</head> 
 
<body class="" ng-app="testBenefits" ng-controller="benefitsCtrl"> 
 
\t <div class="container" ng-repeat="(key, benefit) in benefits"> 
 
\t \t <h3 ng-model="planBenefit.category">{{key}}</h3> 
 
\t \t <table class="table"> 
 
\t \t \t <tr ng-repeat="(key, value) in benefit"> 
 
\t \t \t \t <td ng-model="value.name">{{key}}</td> 
 
\t \t \t \t <td><input type="text" class="form-control" ng-model="value.limit"></td> 
 
\t \t \t \t <td><input type="text" class="form-control" ng-model="value.dlimit"></td> 
 
\t \t \t </tr> 
 
\t \t </table> 
 
\t \t <button ng-click="showItems()">Show Values</button> 
 
\t </div> 
 
</body> 
 
</html>

+0

ありがとうございますArun Shinde、私は作品が表示されますが、それは私が欲しいものではありません。配列は、フォームフィールドを構築するために、データを送信するAPIとは異なるAPIから取得しています。私は持っている配列要素に別の配列を追加しました。 " \t \t \t \t \t利益を:" ": "newPlanに"、 \t \t \t \t \tカテゴリ:バックエンドにデータを送信していたとき、私は{ \t \t \t \t \t計画として、それを送信"、 \t \t \t \t \t limit: ""、 \t \t \t \t \t limit_individual: ""、 \t \t \t \t \t max_day_limit:「私は、データを変更することはできませんので、私は、これはあなたがより多くを達成しようとしています何を理解するのに役立ちます願っています」 \t \t \t \t} – dadidaochieng

+0

は、APIは、あなたのデータを設定しないのはなぜ – dadidaochieng

+0

を受け取ることを想定していることformart ng-clickのフォーマット?あなたはすでにあなたが望むものを達成しました。 –

関連する問題