使用 Angular JS 将数据从 JSON 路径反射到表答案

【问题标题】：Reflecting data from JSON path to table using Angular JS使用 Angular JS 将数据从 JSON 路径反射到表
【发布时间】：2015-07-14 18:38:09
【问题描述】：

使用 Angular JS 将 JSON 数据添加到表中。
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> 筛选

升序

降序

用户身份 ID 标题完全的行动

                <tbody>
                    <tr ng-repeat="x in userId">
                        <td>
                            <div ng-hide="editingData[x.id]">{{x.userId}}       </div>
                            <div ng-show="editingData[x.id]"><input   type="text" ng-model="x.userId" /></div>
                        </td>
                        <td>
                            <div>{{x.id}}</div>

                        </td>
                        <td>
                            <div ng-hide="editingData[x.id]">{{x.title}}   </div>
                            <div ng-show="editingData[x.id]"><input   type="text" ng-model="x.title" /></div>
                        </td>
                        <td>
                            <div ng-hide="editingData[x.id]">{{x.completed}} </div>
                            <div ng-show="editingData[x.id]"><input type="text" ng-model="x.completed" /></div>
                        </td>
                        <td>
                            <button ng-hide="editingData[x.id]" ng-  click="modify(x)">Modify</button>
                            <button ng-show="editingData[x.id]" ng-    click="update(x)">Update</button>
                            <button ng-hide="viewField">Remove</button>
                        </td>
                    </tr>
                </tbody>
            </table>
 </div>
<div>
<div>ADD NEW DETALS</div>
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
    <label class="col-md-2 control-label">USER ID</label>
    <div class="col-md-4">
        <input type="text" class="form-control" name="userId"
            ng-model="x.userId" />
    </div>
 </div>
 <div class="form-group">
    <label class="col-md-2 control-label">ID</label>
    <div class="col-md-4">
        <input type="text" value=201 class="form-control" name="id"
            ng-model="x.id" />
    </div> </div>
<div class="form-group">
    <label class="col-md-2 control-label">TITLE</label>
    <div class="col-md-4">
        <input type="text" class="form-control" name="title"
            ng-model="x.title" />
    </div>
</div>
    <div class="form-group">
    <label class="col-md-2 control-label">COMPLETED</label>
    <div class="col-md-4">
        <input type="text" class="form-control" name="completed"
            ng-model="x.completed" />
    </div>
</div>
<div class="form-group">                                
    <div style="padding-left:110px">
        <input type="submit" value="Submit" class="btn btn-primary"/>
    </div>
</div>
</form>
</div>
</body>
</html>

Controllers.js

var app = angular.module('myApp', []);
 app.controller('customersCtrl', function($scope, $http) {
 $scope.userId = [];
 $http.get("").success(function   (response) 
  {$scope.userId = response});

  $scope.editingData = [];

  for (var i = 1, length = $scope.userId.length; i < length; i++) {
  $scope.editingData[$scope.userId[i].id] = false;
  }


  $scope.modify = function(x){
    $scope.editingData[x.id] = true;
  };


   $scope.update = function(x){
    $scope.editingData[x.id] = false;
   };


   });


  $scope.addRow =function( event ){
  if (event.success) {
  $http.post("", {     'userId':$scope.userId, 'id': $scope.id,  'title':$scope.title, 'completed':$scope.completed })
  .success(function (response) 
  {$scope.userId = response;
  });
   }
   }

样式.css

body {

背景颜色：#eef;
} #标签{ 宽度：95%；左边距：自动；边距右：自动；上边距：10px；

 }

  table, th , td {
 border: 1px solid grey;
 border-collapse: collapse;
  padding: 4px;
  font-family: arial;

  }

  td {
text-align: center;
  }

 th {
 background: darkblue;
 color: white;
 text-align: center;
   }
   /*Style for Alternate Rows*/
   table tr:nth-child(odd) {
    background-color: #C2EBC3;
    }
    table tr:nth-child(even) {
    background-color: #FFFFFF;
    }

简单示例

  <!DOCTYPE html>
  <html>
   <head>
    <script src=     "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>


  <body ng-app="MyApp">
    <input type="text" ng-model="text" placeholder="Enter text"/>
     <p>Input: {{ text }}</p>
     <p>Filtered input: {{ text | reverse }}</p>



          <my-directive></my-directive>

      <script type="text/javascript">
      app.angular.module('myApp', [])
     .directive('myDirective', function() {
    return {
      restrict: 'E',
       template: '<a href="http://google.com">
     Click me to go to Google</a>'
       }
      });


      var app = angular.module("MyApp", []);

     app.filter("reverse", function() {
    return function(input) {
   var result = "";
    input = input || "";
   for (var i=0; i<input.length; i++) {
  result = input.charAt(i) + result;
   }
     return result;
    };
   });
   </script>
   </body>
   </html>

您可以使用此链接作为参考

"http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/" “Push json data to existing array in angular js” "Adding new row of fields with AngularJS ng-repeat"

"Angularjs - Update JSON"

【问题讨论】：

标签： angularjs

【解决方案1】：

您只需定义您的应用一次。您需要删除此行 var app = angular.module("MyApp");，它正在刷新您的应用程序，其中包含 myDirective 指令。

代码

app.angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '<a href="http://google.com">
    Click me to go to Google < /a>'
  }
});
app.filter("reverse", function() {
  return function(input) {
    var result = "";
    input = input || "";
    for (var i = 0; i < input.length; i++) {
      result = input.charAt(i) + result;
    }
    return result;
  };
});

【讨论】：