shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-02 01:21:21 +03:00
Code Releases Activity

Add example for tracking button state with multi-select-list

Browse Source
This commit is contained in:
Joe Fiorini 2015-03-27 16:52:23 -04:00
parent bbf87675db
commit 98eba55bea
1 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
awx/ui/static/js/shared/multi-select-list/multi-select-list.directive.js
View File

@ -63,6 +63,68 @@
</file>
</example>
# Making other elements respond to the state of the selction
In this example, we'll see how to make a button that enables/disables
itself based on some property of the selection.
<example module="stateTrackingExample">
<file name="controller.js">
angular.module('stateTrackingExample', ['multiSelectList'])
.controller('namesController', ['$scope', function($scope) {
$scope.names =
[ { name: 'John'
},
{ name: 'Jared'
},
{ name: 'Joe'
},
{ name: 'James'
},
{ name: 'Matt'
},
{ name: 'Luke'
},
{ name: 'Chris'
}
];
// Initial logic for buttons
$scope.noSelections = true;
$scope.atLeastOneSelection = false;
$scope.exactlyTwoSelections = false;
var cleanup = $scope.$on('multiSelectList.selectionChanged', function(e, selection) {
// Recalculate logic for buttons whenever selections change
$scope.noSelections = selection.length == 0;
$scope.atLeastOneSelection = selection.length >= 1;
$scope.exactlyTwoSelections = selection.length == 2;
});
}]);
</file>
<file name="index.html">
<div ng-controller="namesController">
<button ng-if="noSelections">
Create
</button>
<button ng-if="atLeastOneSelection">
Delete
</button>
<button ng-if="exactlyTwoSelections">
Compare
</button>
<ul multi-select-list>
<li ng-repeat="item in names">
<select-list-item item="item"></select-list-item>
{{item.name}}
</li>
</ul>
</div>
</file>
</example>
*
*/
import controller from './multi-select-list.controller';