Question

我刚开始学习Angular，我尝试制作concat var名称，以便我可以动态控制它。

这就是我试过的 -

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc(1)">Click Me!</button>

<div ng-show="showMe1">
    <h1>Menu:</h1>
    <div>Pizza</div>
    <div>Pasta</div>
    <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe1 = false;
    $scope.myFunc = function(x) {
        var nametocng = 'showMe'+x;
        //var nametocng = $parse("showMe"+x);  // - I tried this also
        $scope.nametocng = !$scope.nametocng;
    }
});
</script>

Answer 1

如果您有动态变量名称，则需要通过[] syntax进行访问。它将评估变量的值并将该值用作属性名称。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc(1)">Click Me!</button>

<div ng-show="showMe1">
    <h1>Menu:</h1>
    <div>Pizza</div>
    <div>Pasta</div>
    <div>Pesce</div>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe1 = false;
    $scope.myFunc = function(x) {
        var nametocng = 'showMe'+x;
        //var nametocng = $parse("showMe"+x);  // - I tried this also
        $scope[nametocng] = !$scope[nametocng];
    }
});
</script>

Answer 2

将$scope[variable]用于动态。

来自您的评论： 最后，我想制作多个Toggles，但我希望所有这些都有一个功能。然后，每个按钮将处理一个切换

您可以使用ng-repeat button来处理不同的菜单

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-repeat="button in array"  ng-click="myFunc(button)">Click Me!</button>

<div ng-show="showMe1">
    <h1>Menu:</h1>
    <div>Pizza1</div>
    <div>Pasta1</div>
    <div>Pesce1</div>
</div>

<div ng-show="showMe2">
    <h1>Menu:</h1>
    <div>Pizza2</div>
    <div>Pasta2</div>
    <div>Pesce2</div>
</div>
{{nametocng}}

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.array = [1,2];
    $scope.firstName = "John";
    $scope.lastName = "Doe";
     
    $scope.myFunc = function(x) {
     angular.forEach($scope.array, function(value, key){
       $scope['showMe'+value] = false
});
        var nametocng = 'showMe'+x;
        //var nametocng = $parse("showMe"+x);  // - I tried this also
        $scope[nametocng] = !$scope[nametocng];
    }
});
</script>

</body>
</html>

请运行以上代码段

Here is a DEMO

Answer 3

尝试使用此

您在点击时保持条件并检查连续字符串

Js代码

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

    app.controller('ctrl', function($scope) {
      $scope.showMe1 = false;
      $scope.nametocng = 'showMe1';
      $scope.myFunc = function(x) {
        var nametocng = 'showMe' + x;
        $scope.showMe1 = $scope.nametocng === nametocng; // result will bool
      }
    });

<强> HTML

    <div ng-app='myApp'>
      <div ng-controller='ctrl'>
        <button ng-click="myFunc(1)">Click Me!</button>
        {{showMe1}} {{nametocng}}
        <div ng-show="showMe1">
          <h1>Menu:</h1>
          <div>Pizza</div>
          <div>Pasta</div>
          <div>Pesce</div>
        </div>
      </div>
    </div>

Jsfiddle link

Angular - 如何连接var名称

3 个答案: