如何使用angularjs在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。

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

在由@Stark Buttowski提供的答案，功能的removeItem將無法正常工作。繼ID相同的正確實施：

在視圖（發送鍵被刪除，而不是主要的指數），

<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刪除，接收到密鑰，

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

     delete $scope.numberlist[key]; 
    };