AngularJS

Question

我有一个小的 JSON 对象，包含国家和城市。

ng-repeat 正在呼叫国家。所以我现在想要当我点击一个国家项目时，这个项目显示城市，然后再点击它切换回国家。

我有两个功能，我可以将项目从国家切换到城市，但我不能切换回原来的（国家）。我该怎么做？

我的HTML:

<body ng-controller="test">

<div ng-repeat="module in values" ng-click="select? setSelected() : setSelected2();select = !select">
    {{module.country}}
</div>

和我的 .js 文件：

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

app.controller('test', ['$scope', function ($scope) {

$scope.values = [
    {
        country: 'England',
        city: 'London',

    },
    {
        country: 'Spain',
        city: 'Madrid',
    }];


$scope.select = true;

$scope.setSelected = function() {

       $scope.values[this.$index].country = $scope.values[this.$index].city;           

    }

$scope.setSelected2 = function() {

       $scope.values[this.$index].country = $scope.values[this.$index].country;

    }

    return false;

}]);

这是我的代码的一个插件： https://plnkr.co/edit/MMqDXJFE9dUcWvuGKRDV?p=preview

感谢您的帮助。

Answer 1

如果只是为了显示目的，这可以帮助你，而不需要将任何 Angular 函数放在 .js 文件中：

<div ng-repeat="module in values" ng-click="select = !select">
    {{select ? module.city : module.country}}
</div>

Answer 2

您应该创建自己的模型来存储显示的值：

$scope.values = [
{
    country: 'England',
    city: 'London',
    showCountry: true
},
{
    country: 'Spain',
    city: 'Madrid',
    showCountry: true
}];



$scope.setSelected = function() {
   if ($scope.values[this.$index].showCountry)
   {
    $scope.values[this.$index].showCountry = false;
   } else {
    $scope.values[this.$index].showCountry = true;
   }
}

<div ng-repeat="module in values" ng-click="setSelected()">
  {{module.showCountry ? module.country : module.city}}
</div>

https://plnkr.co/edit/RsXRMKUETsw9aC0ozkr4?p=preview

AngularJS - 使用 ng 单击在 ng repeat 中的项目之间切换

AngularJS - Switch between items in ng repeat with ng click

javascript

angularjs-ng-click