キー値のペアを表示し、anglejsを使用してonclick中にフィールドを追加する方法

Question

フィールドにオブジェクトのキーと値を表示する必要があります。ユーザーが[追加]ボタンをクリックすると、フィールドの新しい行が追加され、値を挿入できる必要があります。

当初、

var response = { 
    "json": { 
    "response": { 
     "data": [ 
     { 
      "numbersUrlList": { 
      "urlList": { 
       "1": "http://www.press1.wav", 
       "2": "http://www.press2.wav", 
       "3": "http://www.press3.wav", 
       "4": "http://www.press4.wav", 
       "5": "http://www.press5.wav", 
       "6": "http://www.press6.wav" 
      } 
      } 
     } 
     ] 
    } 
    } 
} 

以下のようにJSONを作成する必要が提出をクリックしてください。

var request = { 
    "json": { 
    "request": { 
     "data": [ 
     { 
      "numbersUrlList": { 
      "urlList": { 
       "1": "http://www.press1.wav", 
       "2": "http://www.press2.wav", 
       "3": "http://www.press3.wav", 
       "4": "http://www.press4.wav", 
       "5": "http://www.press5.wav", 
       "6": "http://www.press6.wav", 
       "7": "http://www.press7.wav", 
       "8": "http://www.press8.wav" 
      } 
      } 
     } 
     ] 
    } 
    } 
} 

私はまた、フィドルを作成しました。 http://jsfiddle.net/6Texj/292/

Answer 1

応答の中のnumberlistを変更して、目的のjson出力onsubmitを得ることができます。 @Stark Buttowskiが提供する答えで

var myApp = angular.module('myApp', ['ui.bootstrap']); 
 

 
myApp.controller('myController', function($scope) { 
 

 
    $scope.countBlocks = 0; 
 
    $scope.numberlist = []; 
 

 
    $scope.onload = function() { 
 

 
    $scope.response = { 
 
     "json": { 
 
     "response": { 
 
      "data": [{ 
 
      "numbersUrlList": { 
 
       "urlList": { 
 
       "1": "http://www.press1.wav", 
 
       "2": "http://www.press2.wav", 
 
       "3": "http://www.press3.wav", 
 
       "4": "http://www.press4.wav", 
 
       "5": "http://www.press5.wav", 
 
       "6": "http://www.press6.wav" 
 
       } 
 
      } 
 
      }] 
 
     } 
 
     } 
 
    }; 
 

 
    $scope.numberlist = $scope.response.json.response.data[0].numbersUrlList.urlList; 
 

 

 
    }; 
 

 
    //adding new row for number list url 
 

 
    $scope.addnumberlist = function() { 
 
    var index = parseInt(Object.keys($scope.numberlist)[Object.keys($scope.numberlist).length - 1]); 
 
    //console.log($scope.numberlist); 
 
    //console.log(typeof($scope.numberlist)); 
 
debugger 
 
    $scope.isCollapsed = true; 
 
    $scope.displayremovebutton = true; 
 
    $scope.numberlist[index + 1] = "http://www.press" + (index + 1) + ".wav"; 
 

 

 

 
    }; 
 

 
    $scope.removenumberlist = function(index) { 
 
    //console.log($scope.numberlist); 
 
    debugger 
 
    delete $scope.numberlist[parseInt(index)]; 
 
    }; 
 

 
    $scope.submit = function() { 
 
    // Request need to be created after adding url for 7 and 8 
 
    $scope.response.json.response.data[0].numbersUrlList.urlList = $scope.numberlist; 
 
    console.log($scope.response) 
 
    } 
 
    $scope.onload(); 
 
});

body { 
 
    width: 98%; 
 
} 
 
.option { 
 
    width: 30%; 
 
} 
 
.option1 { 
 
    width: 10%; 
 
} 
 
.option2 { 
 
    width: 20%; 
 
} 
 
.option3 { 
 
    width: 10%; 
 
} 
 
.form-control5 { 
 
    width: 125%; 
 
    height: 34px; 
 
    margin-right: 80px; 
 
    padding: 6px 10px; 
 
    font-size: 14px; 
 
    line-height: 1.42857143; 
 
    color: #555; 
 
    background-image: none; 
 
    border: 1px solid #ccc; 
 
    border-radius: 4px; 
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
 
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
 
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/> 
 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script> 
 

 
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="myController" class="row-fluid"> 
 
    <!-- START $scope.[model] updates --> 
 
    <table class="table"> 
 
     <tbody> 
 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td class="fieldname"><b>Numbers Url List</b> 
 
      </td> 
 
      <td> 
 
      <div ng-show="!isCollapsed[$index]" ng-repeat="(key, value) in numberlist" style="margin-bottom: 10px;"> 
 
       <div class="row col-sm-2" style="margin-bottom: 10px;"> 
 
       <input type="text" name="count" class="form-control5" autocomplete="off" id="urlListNumber_{{$index}}" value="{{key}}" style="width: 100%; margin-right: 0px;"> 
 
       </div> 
 
       <div class="col-sm-10" style="margin-bottom: 10px;"> 
 
       <input type="text" name="count" class="form-control5" autocomplete="off" id="numbersUrlList_{{$index}}" style="width: 120%;margin-right: 0px;" value={{value}}> 
 
       </div><a href ng-click="removenumberlist(key)" ng-if="displayremovebutton">Remove</a> 
 
      </div> 
 
      </td> 
 
      <td no-repeat> 
 
      <button class="btn btn-primary" ng-click="addnumberlist()" style="float: right;">add</button> 
 
      </td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
     </tr> 
 
     <tr> 
 
      <button class="btn btn-primary" ng-click="submit()" style="float: right;">submit</button> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <!-- END TABLE --> 
 
    </div> 
 
</div>

Answer 2

、removeItem機能が正しく動作しません。

<input type="text" name="count" class="form-control5" autocomplete="off" id="numbersUrlList_{{$index}}" style="width: 120%;margin-right: 0px;" value={{value}}></div><a href ng-click="removenumberlist(key)" ng-if="displayremovebutton">Remove</a></div> 

コントローラで

、（キーのインデックスの代わりに、削除されるキーを送信する）観点から

、受信したキーを削除するためにdeleteを使用：IDに同一の適切な実装を以下、

$scope.removenumberlist = function(key) { 
     console.log(key); 

     delete $scope.numberlist[key]; 
    };