Javascript 通过NG click（JS）加载JSON数据_Javascript_Json_Angularjs_Ng Repeat

Javascript 通过NG click（JS）加载JSON数据

javascript json angularjs

Javascript 通过NG click（JS）加载JSON数据,javascript,json,angularjs,ng-repeat,Javascript,Json,Angularjs,Ng Repeat,我在使用NG CLICK加载一组JSON数据时遇到问题。如果没有clickButton功能，数据加载会很好。我的JSON数据结构是否正确？这是我的小提琴。单击[此处]（“鼠标悬停”）这就是你想要实现的吗只需用ajax调用替换clickButton（）函数的内容您忘记将（）放在ng click=“clickButton（）上。您需要实际调用该函数要添加您在评论中提到的搜索功能，只需在第一个ng repeat中添加一个过滤器： ng-repeat="item in items| filte

我在使用NG CLICK加载一组JSON数据时遇到问题。如果没有clickButton功能，数据加载会很好。我的JSON数据结构是否正确？这是我的小提琴。单击[此处]（“鼠标悬停”）

这就是你想要实现的吗

只需用ajax调用替换clickButton（）函数的内容

您忘记将

（）

放在

ng click=“clickButton（）

上。您需要实际调用该函数

要添加您在评论中提到的搜索功能，只需在第一个

ng repeat

中添加一个过滤器：

ng-repeat="item in items| filter: {Name: search}"

加价

  <body ng-controller="myController">
     <div ng-app="myApp">
        <div ng-controller="myController">
          <button ng-click='clickButton()'>Load Data</button>
          <ul ng-repeat="item in items">
            <li ng-repeat="(key, val) in item">{{key}}: {{val}}
            </li>
        </ul>
        </div>
    </div>
  </body>

是的。谢谢。我现在将尝试使用ng模型（搜索）并将其与数据绑定。例如：在表单中键入Sam，单击搜索，它将查找所有Sam Json数据。

var app = angular.module('myApp', []);
app.controller('myController', ['$scope', '$http', function($scope, $http) {
  $scope.clickButton = function() {
    $http.get('data.json').success(function(data) {
        $scope.items = data;
      });
  }

}]);

  <body ng-controller="myController">
     <div ng-app="myApp">
        <div ng-controller="myController">
          <button ng-click='clickButton()'>Load Data</button>
          <ul ng-repeat="item in items">
            <li ng-repeat="(key, val) in item">{{key}}: {{val}}
            </li>
        </ul>
        </div>
    </div>
  </body>

[
  {
        "Name":"Sam",

        "Address":"Street",

        "Phone":"111",

        "status":"Available"

    }, 

    {
        "Name":"Tom",

        "Address":"Road",

        "Phone":"222",

        "status":"Busy"

    }
]