Вы можете использовать словари для этого. Словари - это хранилища ключей и ценностей.
>>> dct = {'x': 1, 'y': 2, 'z': 3}
>>> dct
{'y': 2, 'x': 1, 'z': 3}
>>> dct["y"]
2
Вы можете использовать имена переменных ключей для достижения эффекта переменных переменных без риска для безопасности.
>>> x = "spam"
>>> z = {x: "eggs"}
>>> z["spam"]
'eggs'
В тех случаях, когда вы думаете сделать что-то вроде
var1 = 'foo'
var2 = 'bar'
var3 = 'baz'
...
список может быть более подходящим, чем dict. Список представляет упорядоченную последовательность объектов с целыми индексами:
l = ['foo', 'bar', 'baz']
print(l[1]) # prints bar, because indices start at 0
l.append('potatoes') # l is now ['foo', 'bar', 'baz', 'potatoes']
Для упорядоченных последовательностей списки удобнее, чем dict с целыми ключами, потому что списки поддерживают итерацию в порядке индекса, slicing , append
и другие операции, которые потребуют неудобного управления ключами с помощью dict.
Вместо этого -
<li ui-sref-active="active">
<a ui-sref="posts.details">Posts</a>
</li>
Вы можете это сделать -
<li ng-class="{active: $state.includes('posts')}">
<a ui-sref="posts.details">Posts</a>
</li>
В настоящее время это не работает. Здесь идет обсуждение ( https://github.com/angular-ui/ui-router/pull/927 ). И он будет добавлен в ближайшее время.
UPDATE:
Чтобы это работало, $state
должен быть доступен в поле зрения.
angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
$scope.$state = $state;
}]);
ОБНОВЛЕНИЕ [2]:
Начиная с версии 0.2.11
, это работает из коробки. Проверьте соответствующую проблему: https://github.com/angular-ui/ui-router/issues/818
Мой код перешел из / productGroups в / productPartitions, что является единственным способом доступа к представлению «productPartitions».
Итак, я добавил скрытый якорь с ui-sref, также установленным в «productPartitions» в том же элементе списка, который имеет ui-sref-active
<li ui-sref-active="active">
<a ui-sref="productGroups">
<i class="fa fa-magic"></i> Product groups </a>
<a ui-sref="productPartitions" style="display:none;"></a>
</li>
Теперь кнопка навигации productGroups остается активным при доступе к обоим представлениям
Вот вариант, когда вы вставляете несколько состояний, которые не связаны иерархически, и у вас нет контроллера, доступного для представления. Вы можете использовать фильтр UI-Router includedByState, чтобы проверить ваше текущее состояние на любое количество именованных состояний.
<a ui-sref="production.products" ng-class="{active: ('production.products' |
includedByState) || ('planning.products' | includedByState) ||
('production.categories' | includedByState) ||
('planning.categories' | includedByState)}">
Items
</a>
TL; DR: множественные, несвязанные именованные состояния должны применять активный класс к тому же и у вас нет контроллера? Используйте includedByState .
State
. Также, если вы создаете родительский элемент меню в link-link и не хотите создавать другой State
только для использования функции ui-sref-active
. Я считаю, что State
предназначены для выкладки HTML не для использования в меню-ссылках.
– Barun
27 August 2016 в 14:48
Предположим, что дерево url выглядит следующим образом:
app (for home page) -> app.products -> app.products.category
использование:
<li ui-sref-active="active">
<a ui-sref="app.products">Products</a>
</li>
Теперь, когда вы нажимаете кнопку products
: только продукты будут активны.
, если вы нажмете category
: оба продукта и категория будут активны.
, если вы хотите, чтобы только категория была активной, если вы нажимаете его, вы должны использовать: ui-sref-active-eq
для продуктов, что означает, что только он будет активен, а не является дочерним.
правильное использование в app.js:
angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: { ... }
})
// route for the aboutus page
.state('app.products', {
url:'products',
views: { ... }
})
// route for the contactus page
.state('app.products.category', {
url:'category',
views: { ... }
})
$urlRouterProvider.otherwise('/');
});
ui-sref-active-eq
работает отлично!
– Maxime Lafarie
30 November 2016 в 11:31
Это решение:
<li class="myNonActiveStyle" ui-sref-active="myActiveStyle">
<a ui-sref="project.details">Details</a>
</li>
Edit:
Вышеуказанное работает только для точного пути маршрута и не будет применять activeStyle к вложенным маршрутам. Это решение должно работать для этого:
<a data-ui-sref="root.parent" data-ng-class="{ active: $state.includes('root.parent') }">Link</a>
data-ng-class="{ active: $state.includes('root.parent')
к каждой из ссылок? Где active
- имя класса.
– Holland Risley
9 July 2014 в 16:48
So Simple, Шаг 1: добавьте контроллер для вашей панели навигации или в ваш существующий контроллер, где включен навигационный бар, добавьте следующий
app.controller('navCtrl', ['$scope', '$location', function($scope, $location) {
$scope.isActive = function(destination) {
return destination === $location.path();
}
}]);
Шаг 2: На панели навигации
<li ng-class="{active: isActive('/home')}"><a ui-sref="app.home">Browse Journal</a></li>
Thats it.
UI-маршрутизатор. Код, чтобы активировать навигационную панель.
HTML
<li ui-sref-active="is-active" ui-nested><a ui-sref="course">Courses</a>
</li> <li ui-sref-active="is-active" ui-nested><a ui-sref="blog">blog</a></li>
CSS
is-active{
background-color: rgb(28,153,218);
}
Inside courseView.HTML
<button type="button" ui-sref="blog" class="btn btn-primary">Next</button>
Эта кнопка присутствует внутри курса View которые перемещаются к следующему виду, т.е. блогу. и делает вашу навигационную панель выделенной.
найти аналогичный пример, демонстрационное угловое приложение ui-router: https://github.com/vineetsagar7/Angualr-UI-Router
$state
специально доступным в области, например$rootScope.$state = $state
? – jvannistelrooy 2 June 2014 в 12:23$rootScope
, но это исключение. – Rifat 2 June 2014 в 13:02$scope.includes = $state.includes
), а не прикреплял все$state
. – richleland 20 August 2014 в 01:38