Question

我对Angular（1）很陌生，我很难理解这里出了什么问题。我希望有两个列表（位置和样式），在单击相应的项目时打印该值。这将在

标记中连接：ie {{locationTags}} {{styleTags}} =来自位置li的值+来自样式li的值。与此同时，我希望用户只能从每个列表中选择一个项目（它将被切换）。

例如，阿姆斯特丹和222选中的应该产生“1test222”的结果，并且每个都被“选中”或切换。

Here是jsfiddle，这是代码：

<body ng-app="myapp">
<div ng-controller="MyController" >
    <ul>
        <li ng-repeat="location in myData.location" ng-class="{active:($parent.selected == $index)}" ng-click="$parent.selected = $index;myData.doClick(location)">{{location.city}}</li>
    </ul>
        <ul>
        <li ng-repeat="style in myData.style" ng-class="{active:($parent.selected == $index)}" ng-click="$parent.selected = $index;myData.doClick(style)">{{style.id}}</li>
    </ul>
    <p>{{locationTags}} {{styleTags}}</p>
</div>

    </body>
angular.module("myapp", []).controller("MyController", function ($scope) {
      $scope.myData = {};
      $scope.myData.location = [{
          city: "None"
    }, {
          city: "Amsterdam"
          , tags: "1"
    }, {
          city: "Argentina"
          , tags: "2"
    }];
      $scope.myData.doClick = function (location) {
          $scope.locationTags = location.tags;
      }
      $scope.myData.style = [{
          id: "111"
          , tags: "test11"
    },{
          id: "222"
          , tags: "test22"
    },{
          id: "333"
          , tags: "test33"
    }];
      $scope.myData.doClick = function (style) {
          $scope.styleTags = style.tags;
      }
      $scope.toggle = function (item) {
          item.selected = !item.selected;
      };
  });

非常感谢任何帮助。

Answer 1

您使用相同的变量（$ parent.selected）来保留两种选择状态。

尝试使用$ parent.selectedLocation和$ parent.selectedStyle

此外，$ scope.myData.doClick（）中存在名称冲突。您正在用第二个函数覆盖第一个函数，因为您将它分配给同一个变量。

尝试使用$ scope.myLocation.doClick（）和$ scope.myStyle.doClick（）并相应地编辑其余代码

AngularJS多个列表打印值，可以切换

1 个答案: