角Js数据范围

Question

我真的很喜欢这个，我想知道是否有人可以帮助我解决这个问题。

从来就得到了这个一小段代码：

<div id="countries"> 
      <div id="box2"> 
       <img src="images/world/africa.png" ng-click="region='africa'" id="africa_button"> 
       <h3>AFRICA</h3> 
      </div> 
     <div id="box2"> 
      <img src="images/world/me.png" ng-click="region='Middle East'" id="middle_button"> 
      <h3>MIDDLE EAST</h3> 
     </div> 
     <div id="box2"> 
      <img src="images/world/ssa.png" ng-click="region='south america'" id="south_button"> 
      <h3>SOUTH AMERICA</h3> 
     </div> 
     <div id="box2"> 
      <img src="images/world/caribbean.png" ng-click="region='caribbean'" id="caribbean_button"> 
      <h3>CARIBBEAN</h3> 
     </div> 
    </div> 
    <div id="listing"> 
     <h3 ng-init="region='select a region'">{{region | uppercase}}</h3> 
     <p>Select your country</p> 
     <ul> 
      <li ng-repeat="country in countriesA" ng-click="countri='{{country.africa}}'" class="li_africa">{{country.africa | uppercase}}</li> 
      <li ng-repeat="country in countriesA" ng-click="countri='{{country.middle}}'" class="li_middle">{{country.middle | uppercase}}</li> 
      <li ng-repeat="country in countriesA" ng-click="countri='{{country.south}}'" class="li_south">{{country.south | uppercase}}</li> 
      <li ng-repeat="country in countriesA" ng-click="countri='{{country.caribbean}}'" class="li_caribbean">{{country.caribbean | uppercase}}</li> 
     </ul> 
    </div> 
    <div id="form"> 
     <h3 ng-init="countri='select a country'" id="h3">{{region | uppercase}} - {{countri | uppercase}}</h3> 

的事情是，我正尝试让范围，通过一个新的绑定通过inforation。它打算在＃列表上打印一些li，实际上它确实如此，它使我在{{country.caribbean |大写}}角表达式和其他的，但我想要做的事情是，当我想点击其中一个李的我希望那里打印的信息（这些国家）传递给一个新的变量，并显示在{{countri |大写}}。如果有什么你可以帮助我或别的什么，你需要帮助我，请与我联系isidoro.barrera2@gmail.com如果我不迅速回答！ 帮忙，谢谢！

Answer 1

我不完全确定你要完成什么，但我做了一个可能对你有帮助的例子。

<div ng-repeat="c in countries"> 
     <button class="btn btn-primary" ng-click="setRegion(c.region)">{{c.region}}</button> 
     <p></p> 
    </div> 
    <div> 
     <div id="listing"> 
     <h3 ng-init="region='select a region'">{{region | uppercase}}</h3> 
     <p>Select your country</p> 
     <ul> 
      <li ng-repeat="c in countries" ng-click="setCountry(c.name)">{{c.name}} </li> 
     </ul> 
     </div> 
     <div id="form"> 
     <h3>{{myRegion | uppercase}} - {{myCountry | uppercase}}</h3> 
     </div> 
    </div> 

在控制器

$scope.countries = [ 
{name:'Africa', region:'Africa'}, 
{name:'Middle East', region:'Middle East'}, 
{name:'South America', region:'South America'}, 
{name:'Caribbean', region:'Caribbean'} 
]; 
$scope.setCountry = function(value){ 
    $scope.myCountry = value; 
}; 
$scope.setRegion = function(value){ 
    $scope.myRegion = value; 
}; 

这里给codepen一个链接显示的工作示例http://codepen.io/mkl/pen/LZNKXg