Question

我正在尝试学习angularJS，我想做一个简单的应用程序，它使用Json数据动态填充标签。

我的db，City和Country中有两个表。所以一个国家有很多城市，一个城市只有一个国家。

让我们说：

国家：

countryId：1，countryName：France
countryId：2，countryName：England

城市：

cityId：1，countryId：1，cityName：Paris
cityId：2，countryId：1，cityName：Marseille
cityId：3，countryId：2，cityName：London
cityId：4，countryId：2，cityName：Southampton

我创建了一个简单的api，实际上只有两种方法：

GET / api / City给我JSON（所有城市）：

    {
    "City":[
    {
     "cityId" : 1,
     "countryId" : 1, 
     "cityName" : Paris
    },
    ...
    ...
    ]
    }

GET / api / Country给我JSON（所有国家）：

    {
    "Country":[
    {
     "countryId" : 1,
     "countryName" : France
    },
    ...
    ...
    ]
    }

我想在我的观点中有这样的事情：

Tab France - ＆gt;内容：巴黎马赛

Tab England - ＆gt;内容：伦敦南安普敦

因此，两个标签必须具有两个国家/地区的名称，并且必须将其城市作为内容。

一切都必须是动态的，因为后来我想实现两个接口，以便通过选择具有＆lt;的国家/地区来添加国家（标签）和城市。选择＆gt;。

在我的控制器中，我做了两个$ http请求，一个在/ api / City上，我在$ scope.Tabs中用/ api / Country填写$ scope.TabsContent和数据。

我已经实现了动态创建两个Country选项卡（在$ scope.Tabs上使用ng-repeat），当我点击它们时它们会显示正确的容器。

我的问题是将这两个容器填入$ scope.TabsContent中的正确城市。（巴黎和马赛在法国标签/伦敦和南安普敦在英格兰标签）。

我在很多方面尝试过，但没有成功。我想我没有采用正确的方法..

编辑：

这是代码（简化）：

HTML：

    <body ng-app="countriesAndCities" ng-controller="MainCtrl">


      <ul class="nav nav-tabs" id="mytab">
          <li ng-repeat="Tab in Tabs"  ng-class="{active: $index == 0}">
              <a href="#tab{{$index + 1}}" data-toggle="tab">{{Tab.name}}</a>
          </li>
      </ul>

      <div class="tab-content">
          <div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="Tab in Tabs" ng-class="{active: $index == 0}">

                    Tab n° {{$index + 1}}

          </div>
      </div>

  </body>

app.js

var app = angular.module('countriesAndCities', []);

app.controller('MainCtrl', function ($scope, $http) {

$('#mytab').tab('show');

// This is what I got from $http request, simplification in hardcode here :

    var Tabs = [{"countryId":"1","countryName":"France"},{"countryId":"2","countryName":"England"}];

// Same for the cities :

 var TabsContent = [{"cityId":"1","countryId":1,"cityName":"Paris"},{"cityId":"2","countryId":1,"cityName":"Marseille"},{"cityId":"3","countryId":2,"cityName":"London"},{"cityId":"4","countryId":2,"cityName":"Southampton"}];



});

实际上，我有两个标签France＆amp;英格兰及其内容为法国标签的“Tab n°1”和英格兰标签的“Tab n°2”。

如何使用$ scope.TabsContent将“Tab n°1”替换为“Paris Marseille”和“Tab n°2”by“London Southampton”？

使用angularJS中的正确内容动态填充选项卡

0 个答案: