Изменить значение области на ng-click

Я хотел бы использовать вкладки, чтобы скрыть и показать элементы в ng-repeat. Возможно ли изменить значение области видимости так?Изменить значение области на ng-click

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

источник

2016-07-15 Christian Hill

Вот код, который делает именно то, что ваш просят

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>

источник

2016-07-15 04:07:06

Итак, я предполагаю, что пакеты - это массив, и то, что вы разместили, не является вашим полным кодом. Вы хотите изменить нг-шоу сказать

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

это будет только показать DIV, если PackageID такой же, как тип пакета. Ваш ng-click должен работать нормально. Вы хотите, чтобы установить значение по умолчанию для packageType где-то в контроллере, однако, так что-то первоначально показывает

источник

2016-07-15 01:07:29 ceckenrode

спасибо, но это многоуровневые пакеты. Если packageID = 1, то мне нужно показать это для 1,2 3 и 4, следовательно,> =. –

Вы код имеет несколько проблем:

Вы первый нг-щелчок не имеет закрывающую кавычку.

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

Вы устанавливаете packageType в строку, когда это число позже:

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

Вам не нужно {{}} в нг-шоу

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>

источник

2016-07-15 01:08:15 ScottL

Спасибо, да это не мой код, просто быстро напечатанная барабанная версия. Спасибо за это, хотя! Я собираюсь попробовать это сейчас. –

Позвольте пояснить: массив, который я показал, является всего лишь одним из около 50 предметов. Кроме того, массив предопределен, и я не могу изменить имя без перезаписи большого количества кода, и я не понимаю значение добавления массива с помощью vm. Я удалил фигурные скобки из ng-show. Есть ли альтернативный способ сделать это без изменения controlelr? –

Кроме того, это работает только для точных значений. Мне нужно показать пакет 1, если packageID равен 1, 2, 3 или 4. пакет 2 должен быть показан, если packageID равен 2, 3 или 4 и т. Д. –

Я хотел бы написать функцию, которая инкапсулирует то, что вы хотите, чтобы это произошли по щелчку. Это облегчит понимание.

источник

2016-07-15 02:49:00

Изменить значение области на ng-click

ответ

Смежные вопросы