使用angularjs读取json文件，但它不会发生

这不适用于读取和插入数据，我在js文件夹中有data.json

<ion-content>
  <div ng-controller="jsonCtrl" ng-repeat="d in data">
    <h2>{{d[0].name}}</h2>
    <h2>{{d[0].shortname}}</h2>
    <h2>{{d[0].reknown}}</h2>
    <p>{{d[0].bio}}</p>

      <h2>Total Data {{ getTotalData() }}</h2>

      <label>Name</label>
      <input type="text" ng-model="Name">

      <label>Short name</label>
      <input type="text" ng-model="Shortname">

      <label>Reknown</label>
      <input type="text" ng-model="Reknown">

      <label>Bio</label>
      <input type="text" ng-model="Bio">

      <button ng-click="addData()">Add</button>
  </div>
</ion-content>

我的控制器如下所示：

.controller('jsonCtrl', function($scope, $http) {

  $http.get('data.json').success(function(res) {
    $scope.data = res;
    console.log($scope.data);
  });

  $scope.addData = function() {
    $scope.data.push({
      name: $scope.Name,
      shortname: $scope.Shortname,
      reknown: $scope.Reknown,
      bio: $scope.Bio
    });
  }

  $scope.getTotalData = function() {
    return $scope.data.length;
  }
});

编辑：

data.json

示例：

{ "speakers" : [
  { 
    "name":"Mr Bellingham",
    "shortname":"Barot_Bellingham",
    "reknown":"Royal Academy of Painting and Sculpture",
    "bio":"Barot has just finished his final year at The Royal Academy"
  },
  // etc...
]}

编辑：我编辑了答案，因为OP的代码中似乎有更多的问题

首先，您不应该将

ng repeat

和

ng controller

放在同一个元素上

ng repeat

具有更高的优先级，因此，所发生的事情是，对于

ng repeat

的每次迭代，您都有一个控制器

相反，将

ng controller

放置在父元素上：

<ion-content ng-controller="jsonCtrl">
  <div ng-repeat="d in data">      
    etc ...

  </div>
</ion-content>

第三，新项目应该在

ng repeat

之外-您不打算重复它，对吗

<ion-content ng-controller="jsonCtrl">
  <div ng-repeat="d in data">      
    <h2>{{d.name}}</h2>
    ... etc
  </div>

  <label>Name</label>
  <input type="text" ng-model="Name">

  <label>Short name</label>
  <input type="text" ng-model="newItem.shortname">

  ... etc

  <button ng-click="addData()">Add</button>    

</ion-content>

名称
简称
... 等

如果代码格式不合适，请道歉。我在像这样运行之后添加了控制器：.controller（'jsonCtrl'，function（$scope，$http）{$http.get（'data.json'）.success（function（res）{$scope.data=res；console.log（$scope.data）；}）；$scope.addData=function（）{$scope.data.push({name:$scope.name，shortname:$scope.shortname，reknown:$scope.reknown，bio:$scope.bio}）；}$scope.getTotalData=function（）{return$scope.data.length；}）；@New Dev这个代码在你的应用程序上有效吗？实际上我已经试过了，但没有找到有效的方法。这个代码中只有很小的改动，比如.controller（'jsonCtrl'，['$scope'，'http'，function（$scope，$http）{to.controller（'jsonCtrl'，function（$scope，$http）{@NiteshDhakal，你接受了这个答案-你让它起作用了吗？不，它不起作用，可能是我的js中有什么问题。你能帮我解决这个问题吗？你要求的是json文件格式，我在下面的答案中注释了它。@NiteshDhakal“不起作用”的确切含义是什么意思？请删除下面的答案-答案只是答案，不是编辑或评论。您可以编辑原始问题instead@NiteshDhakal，好的，根据您的数据，您似乎正在迭代

$scope.data.speakers

，因此更改为

ng repeat=“d in data.speakers”

<ion-content ng-controller="jsonCtrl">
  <div ng-repeat="d in data">      
    <h2>{{d.name}}</h2>
    <h2>{{d.shortname}}</h2>
    <h2>{{d.reknown}}</h2>
    <p>{{d.bio}}</p>
  </div>
</ion-content>

<ion-content ng-controller="jsonCtrl">
  <div ng-repeat="d in data">      
    <h2>{{d.name}}</h2>
    ... etc
  </div>

  <label>Name</label>
  <input type="text" ng-model="Name">

  <label>Short name</label>
  <input type="text" ng-model="newItem.shortname">

  ... etc

  <button ng-click="addData()">Add</button>    

</ion-content>

$scope.newItem = {};
$scope.addData = function(){
  $scope.data.push($scope.newItem);
  $scope.newItem = {};
}

<label>Name</label>
<input type="text" ng-model="newItem.name">

<label>Short name</label>
<input type="text" ng-model="newItem.shortname">

... etc