在 ng-click 上更改范围值答案

【问题标题】：Change scope value on ng-click在 ng-click 上更改范围值
【发布时间】：2016-07-15 00:53:56
【问题描述】：

我想使用标签来隐藏和显示 ng-repeat 中的项目。是否可以像这样更改范围的值？

 <a ng-click="packageType = '1'">Package 1</a><a ng-click="packageType ='2'">Package 2</a><a ng-click="packageType = '3'">Package 3</a>
<div ng-repeat="item in packages" ng-show="packageType >=item.packageID">
{{item.name}}</div>

和范围：

$scope.packages = [...{ "name": "some name",
                    "packageID": 1}...]

其中 packageID 可以是 1、2 还是 3？

【问题讨论】：

标签： angularjs ng-repeat angular-ngmodel

【解决方案1】：

这是完全符合您要求的代码

Plunker

<!DOCTYPE html>
  <html ng-app="app">

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
  </head>

  <body ng-controller="MainCtrl">

    <div ng-controller="TabCtrl">
      <tabset>
        <tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active" select="onTabSelected(tab.slug)">
          {{ tab.packageId }}
        </tab>
      </tabset>
    </div>
    <script type="text/javascript" charset="utf-8">
      angular.module('app', ['ui.bootstrap']).config(['$routeProvider', '$locationProvider',
      function($routeProvider, $locationProvider) {
          $routeProvider.when('/', {
              controller: 'MainCtrl'
          }).when('/room/:id', {
              controller: 'RoomCtrl',
          }).when('/dashboard', {
              controller: 'DashboardCtrl'            
          }).otherwise({
              redirectTo: '/'
          });
          $locationProvider.html5Mode(false);
      }]);    

      var TabCtrl = function($scope) {
        $scope.tabs = [{
          slug: 'dashboard',
          name: "Package 1",
          packageId: "some package #1"
        }, {
          slug: 'room-1',
          name: "Package 2",
          packageId: "some package #2"
        }, {
          slug: 'room-2',
          name: "Package 3",
          packageId: "some package #3"
        }];
      };

      RoomCtrl = function($scope, $location) {

      };

      DashboardCtrl = function($scope, $location) {

      };    

      MainCtrl = function($scope, $location) {

        $scope.onTabSelected = function(tab) {
          var route;
          if (typeof tab === 'string') {
            switch (tab) {
              case 'dashboard':
                route = tab;
                break;
              default:
                route = 'rooms/' + tab;
                break;
            }
          }
          $location.path('/' + route);
        };

      };
    </script>
  </body>

</html>

【讨论】：

【解决方案2】：

我会编写一个函数来封装您希望在点击时发生的事情。这样会更容易理解。

【讨论】：

【解决方案3】：

所以我假设包是一个数组，而您发布的不是完整的代码。你会想要改变你的 ng-show 说

ng-show="packageType == item.packageID"

仅当 packageID 与包类型相同时才会显示 div。您的 ng-click 应该可以正常工作。您将希望在控制器中的某处为 packageType 设置默认值，但是最初会显示一些内容

【讨论】：

谢谢，但这些是分层包。如果 packageID = 1，那么我需要它显示 1,2 3 和 4，因此 >=.

【解决方案4】：

你的代码有一些问题：

您的第一次 ng-click 没有结束引号。

<a ng-click="packageType = '1'>Package 1</a>

你将 packageType 设置为字符串，当它是一个数字之后：

packageType ='2'
$scope.packages = { "name": "some name",
                    "packageID": 1}

ng-show 中不需要 {{}}

ng-show="packageType >={{item.packageID}}"

我认为你的意思是让包成为一个数组而不是一个对象：

$scope.packages = { "name": "some name",
                    "packageID": 1}

如何做到这一点的例子如下。我将其设置为显示在第二个和第三个链接上：

(function() {
  'use strict';

  angular
    .module('exampleApp', [])
    .controller('ExampleController', ExampleController);

  function ExampleController($scope) {
    var vm = this;
    $scope.packageType = 1;
    $scope.packages = [{
      "name": "some name1",
      "packageID": 2
    }, {
      "name": "some name2",
      "packageID": 2
    }, {
      "name": "some name3",
      "packageID": 2
    }, {
      "name": "some name4",
      "packageID": 3
    }, {
      "name": "some name5",
      "packageID": 3
    }, {
      "name": "some nam6",
      "packageID": 3
    }];
  }
  ExampleController.$inject = ['$scope'];
})();

<!DOCTYPE html>
<html ng-app='exampleApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="ExampleController">
  <a ng-click="packageType = 1">Package 1</a>
  <a ng-click="packageType = 2">Package 2</a>
  <a ng-click="packageType = 3">Package 3</a>
  <p ng-repeat="item in packages" ng-show="packageType >= item.packageID">{{item.name}}
  </p>
</body>

</html>

【讨论】：

谢谢，是的，这不是我的代码，只是一个快速键入的打鼓版本。不过谢谢你！我现在要试试这个。
让我澄清一下：我展示的数组只是大约 50 个项目之一。此外，数组是预定义的，如果不重写大量代码，我就无法更改名称，而且我不理解在数组范围前加上 vm 的价值。我从 ng-show 中删除了大括号。有没有其他方法可以在不修改控制器的情况下做到这一点？
另外，这仅适用于精确值。如果 packageID 为 1、2、3 或 4，我需要显示包 1。如果 packageID 为 2、3 或 4 等，则需要显示包 2。
@ChristianHill 您开始描述一个与您在问题中解释的不同的过滤器。 ng-repeat 支持过滤器
我不这么认为。我的代码说明了我想要实现的目标。这就是我使用 >= 的原因。这意味着大于或等于。显然这不是我接触 SO 社区的原因。