在 ng-click 上更改范围值 [英] Change scope value on ng-click

查看：20 发布时间：2021/11/10 2:46:39 angularjs ng-repeat angular-ngmodel

本文介绍了在 ng-click 上更改范围值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

 <a ng-click="packageType = '1'">Package 1</a><a ng-click="packageType='2'">Package 2</a><a ng-click="packageType = '3'">包 3</a><div ng-repeat="包裹中的物品" ng-show="packageType >=item.packageID">{{item.name}}

和范围:

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

packageID 可以是 1、2 还是 3?

解决方案

这是完全按照您的要求执行的代码

Plunker

<html ng-app="app"><头><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"><body ng-controller="MainCtrl"><div ng-controller="TabCtrl"><标签集><tab ng-repeat="tab in tabs" Heading="{{tab.name}}" active="tab.active" select="onTabSelected(tab.slug)">{{ tab.packageId }}</tab></tabset>

I would like to use tabs to hide and show items in an ng-repeat. Is it possible to change the value of a scope like so?

 <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>

and the scope:

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

Where packageID can be 1, 2 or 3?

解决方案

Here's the code that does exactly what your asking

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>

这篇关于在 ng-click 上更改范围值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

在 ng-click 上更改范围值 [英] Change scope value on ng-click

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

在 ng-click 上更改范围值 [英] Change scope value on ng-click

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭