I am creating a custom dropdown without using any input element or ngModel for two-way binding. Is it possible to achieve two-way binding with custom attributes?
var mainApp = angular.module('mainApp', []);
mainApp.directive('tableDropdown', ['$timeout',
function($timeout) {
return {
restrict: 'C',
scope: {
selectedFilter: '=?'
},
link: function(scope, elem, attrs) {
$timeout(function() {
angular.element(elem).find('li:first-child').addClass(angular.element(elem).find('li').hasClass('selected') ? '' : 'selected');
scope.selectedFilter.cycleStatus = null;
angular.element(elem).find('li').click(function(e) {
if (angular.element(this).closest('ul').hasClass('active')) {
angular.element(this).closest('ul').removeClass('active');
scope.selectedFilter.selected = angular.element(this).attr('value');
} else {
angular.element(this).closest('ul').addClass('active');
scope.selectedFilter.selected = null;
}
angular.element(this).addClass('selected').siblings().removeClass('selected');
})
}, 0);
}
}
}
])<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<th ng-app="mainApp" ng-init="datefilter.selected=null">
--{{datefilter.selected}}
<ul class="tableDropdown" selected-filter="datefilter.selected">
<li value="null" class="default"><span>Cycle Status</span>
</li>
<li value="completed"><span>Completed</span>
</li>
<li value="cancelled"><span>Cancelled</span>
</li>
</ul>
</th>The CSS for the dropdown appearance is not included as I deemed it unnecessary.
I aim to retrieve the selected value in datefilter.selected and utilize it for further actions. Is this achievable? If not, are there any workarounds?