Javascript 如何在Angularjs控制器中单击时更新html_Javascript_Jquery_Json_Angularjs

Javascript 如何在Angularjs控制器中单击时更新html

javascript jquery json angularjs

Javascript 如何在Angularjs控制器中单击时更新html,javascript,jquery,json,angularjs,Javascript,Jquery,Json,Angularjs,我有需要从json数据更新的html结构。我的Json数据在控制器中。我需要为ng click事件编写一个表达式，该表达式将读取json数据，并在html中放入相应的div。但我不知道如何做到这一点以下是我到目前为止的情况 <body data-ng-app> <div class="container" data-ng-controller="UpdateDataCtrl"> <div class="inner1"></div

我有需要从json数据更新的html结构。我的Json数据在控制器中。我需要为ng click事件编写一个表达式，该表达式将读取json数据，并在html中放入相应的div。但我不知道如何做到这一点

以下是我到目前为止的情况

<body data-ng-app>
    <div class="container" data-ng-controller="UpdateDataCtrl">
        <div class="inner1"></div>
        <div class="inner2"></div>
    </div>
    <a href="javascript:void(0)" ng-click="not sure how to get json here">UPdate Controllers</a>
</body>


function UpdateDataCtrl($scope) {
        $scope.data = [
            {
                "USA":"Eglish",
                "Pop":"232423432432"
            },
            {
                "France":"French",
                "Pop":"1212323432"
            },
            {
                "Spain":"Spainish",
                "Pop":"3432432"
            }
        ]
    }


函数UpdateDataCtrl（$scope）{
$scope.data=[
{
“美国”：“英语”，
“Pop”：“23242343432”
},
{
“法国”：“法国”，
“Pop”：“1212323432”
},
{
“西班牙”：“西班牙语”，
“Pop”：“3432432”
}
]
}

每次单击2 Div都会从json更新。第一个div应该有USA---English Pop---2342234232，然后单击下一步，该div应该有来自法国的数据，依此类推

谢谢

看来你对AngularjS的概念还不清楚。您不想更新div。您希望引用模型，然后更改模型中的数据

例如，您可以这样编写div：

<div class="inner1">Population: {{data[dataindex].Pop}}</div>

单击函数（必须在控制器控制的块内具有与ng:click的链接！）可以将dataindex增加1，并在到达数组末尾时再次在0处使用模重启

$scope.click = function() {
  $scope.dataindex = ($scope.dataindex+1) % $scope.data.length;

下面是一个经过更新和修改的示例JSFIDLE，它将显示所有正在运行的内容：

单击链接时将数据绑定到范围：

$scope.update = function() {
  $scope.data = data; //your array defined locally to the scope
};

ng repeat

您绑定到范围的数据；如果数组大小>0，则显示容器

使用

{index}}

获取循环中的迭代变量

最重要的是，移动顶部的

ng控制器

声明，将

ng repeat

和

ng click

括起来；否则，AngularJS无法猜测您想要实现什么

谢谢，这很有用。什么是数据索引。这是angularjs中的一个关键字吗？不，它只是另一个变量，用作数组索引，然后在单击时递增。谢谢，我欠你一份款待。。。这就是在angular$scope.dataindex=0中定义变量的方式@迈克-我强烈建议你花一两个小时完成AngularJS入门教程@。它是交互式的，可以回答你的很多问题。egghead.io上的angularjs教程视频也是一个很好的资源。

$scope.update = function() {
  $scope.data = data; //your array defined locally to the scope
};