Have the following view :
ContactsApp.SettingsView = Backbone.Marionette.ItemView.extend({
initialize: function () {
this.bindTo(this.model, "change", this.modelChanged);
},
modelChanged: function (model, value) {
console.log(this.model.get('search'));
this.render();
},
events: {
'click .clickable': 'GoTo',
'keyup input[type=text]': 'search'
},
GoTo: function (ev) {
var dest = $(ev.target).data('dest');
if (dest == undefined) { return; }
if (dest === "next") { this.model.nextPage(); return; }
if (dest === "prev") { this.model.previousPage(); return; }
this.model.set({ page: dest });
},
search : function (ev) {
console.log('search');
},
template: "#additional-stuff-template"
});
And My Template :
<script type="text/template" id="additional-stuff-template">
<span class="clickable" data-dest="1">First</span>
<span class="clickable" data-dest="prev">Previous</span>
<input type="text" value="{{ page }}" size="3" /> of {{ pages}}
<span class="clickable" data-dest="next">Next</span>
<span class="clickable" data-dest="{{ pages }}">Last</span>
Search : <input type="text" class="search" value="{{ search }}" size="15" />
</script>
The events dont fire. if i change
events: {
'click .clickable': 'GoTo',
'keyup input[type=text]': 'search'
},
to
events: {
'click': 'GoTo',
'keyup': 'search'
},
I can get the click event to run but its not solely on the span's (had the same issue with anchor tags as well.
I know this is something stupid i am doing ...
Turns out it wasnt something i was doing that was stupid.
It turns out that this can happen if you have
jquery.validate 1.5.5
and
jquery 1.7.2
(there may be other versions that this effects this was just the one i had)
removing jquery.validate (which i wasnt using) made it start working again
Related
I've just created an autocomplete Kendo input field inside a div which has to be controlled by a ng-if, because it has to be shown only to a particular category of users.
But I finally get rendered on my browser only a normal input field with no autocomplete properties.
If I remove the ng-if directive or even if I transform it to ng-show it works properly.
This is my HTML:
<div ng-if="utenteProfilo=='PB'">
<label for="PB" class="col-sm-2 control-label">PB</label>
<div class="col-sm-4">
<input ng-model="codPB" class="cento" id="codPB" />
<input type="hidden" id="cognomePb" name="cognomePb" />
<input type="hidden" id="nomePb" name="nomePb" />
</div>
</div>
This is my JS:
$("#codPB").kendoAutoComplete({
placeholder: "Scegliere un PB...",
dataTextField: 'PBanker',
filter: "contains",
autoBind: false,
minLength: 3,
headerTemplate: '<div class="dropdown-header k-widget k-header">' +
'<span>Cognome</span>' +
'<span>Nome</span>' +
'</div>',
template: '<span class="k-state-default" ></span>' +
'<span class="k-state-default"><h6 data-recordCognomePB="#= cognome #" data-recordNomePB="#= nome #">#: data.cognome # #: data.nome #</h6></span>',
select: function(e) {
var cognomePb = e.item.find('h6').attr('data-recordCognomePB');
var nomePb = e.item.find('h6').attr('data-recordNomePB');
$('#cognomePb').val(cognomePb);
$('#nomePb').val(nomePb);
},
filtering: function(e) {
$('#cognomePb').val('');
$('#nomePb').val('');
},
dataSource: {
schema: {
parse: function(response) {
var length = response.length;
var dataItem;
var idx = 0;
for (; idx < length; idx++) {
dataItem = response[idx];
dataItem.PBanker = dataItem.cognome + " " + dataItem.nome;
}
return response;
}
},
serverFiltering: true,
transport: {
read: {
url: "http://myFile.json",
data: function(){
return {pb: $('#codPB').val()}
}
}
},
},
});
Do you know any issues about this behavior? Am I acting something wrong?
Try to avoid querying the DOM (with $("#codPB").kendoAutoComplete()) when using angular. You are mixing two different approaches.
In this case, Kendo provides directives to work with angular, see this demo:
HTML
<input kendo-auto-complete ng-model="country"
k-data-source="countryNames" style="width: 100%;" />
JS
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.countryNames = [
"Albania",
"Andorra",
//[...]
"Ukraine",
"United Kingdom",
"Vatican City"
];
});
The other solution (less elegant) is to use ng-show instead of ng-if.
I have created an accordion toggle for ionic angular in this punkr.
What i intend to achieve is to translate it to an directive that can be used as follow, where the content is dynamic based on the html that user insert. It could be a form, a text or simply a button. How could it be done??
<custom-accordion title="Header 1">
Content 1
</custom-accordion>
<custom-accordion title="Header 2">
Text: <input type="text" style="background: grey;" /><br>
Number: <input type="number" style="background: grey;" /><br>
</custom-accordion>
You can create a directive for the accordion and then load the content dynamically based on a scope variable. You might have to create separate HTML files for the content that you desire. Here is a plunkr for the same.
Directive
angular.module('starter.directives', [])
.directive("dynamicAccordion", function() {
return {
restrict:"A/E",
scope: {
content: "#"
},
template:"<div ng-include=getContent()></div>",
link: function(scope) {
scope.getContent = function() {
return scope.content;
},
scope.toggleContent = function() {
scope.isShow = !scope.isShow;
},
scope.isShow = true;
}
}
});
HTML
<ion-view title="Dashboard">
<ion-content class="has-header padding">
<dynamic-accordion content="accordionbutton.html"></dynamic-accordion>
<dynamic-accordion content="accordionform.html"></dynamic-accordion>
</ion-content>
</ion-view>
EDIT
This plunkr exposes the model from each form to the controller.
Directive
angular.module('starter.directives', [])
.directive("dynamicAccordion", function() {
return {
restrict:"A/E",
scope: {
content: "#",
model: "="
},
template:"<div ng-include=getContent()></div>",
link: function(scope) {
scope.getContent = function() {
return scope.content;
},
scope.toggleContent = function() {
scope.isShow = !scope.isShow;
},
scope.isShow = true;
}
}
});
HTML
<form>
{{ form | json }}
<dynamic-accordion content="accordionbutton.html" model="model1"></dynamic-accordion>
<dynamic-accordion content="accordionform.html" model="model2"></dynamic-accordion>
</form>
<button ng-click="checkModel()">Check Model</button>
Controller
$scope.model1 = {
text: "Default - 1",
number: 0
};
$scope.model2 = {
text: "Default - 2",
number: 0
};
$scope.checkModel = function() {
console.log("Text_1 "+$scope.model1.text +" Number_1 "+$scope.model1.number);
console.log("Text_2 "+$scope.model2.text +" Number_2 "+$scope.model2.number);
}
I am using ui-grid. I enabled edit feature using ui-grid-edit. The problem is datepicker.
I want the datepicker to work in all browsers but it is not possible by enabling the type : "date" because it will give the same datepicker supported by HTML5.
So i thought of enabling bootstrap datepicker for angular using custom template
by adding editableCellTemplate
columnDefs : {
field:'accbirthdate',displayName :"Birth Date",enableCellEditOnFocus:true,editableCellTemplate: '<input type="text" ng-input="COL_FIELD" ng-model="COL_FIELD" datepicker-popup="dd-MM-yyyy" datepicker-append-to-body="true"/>'}
}
but it is not working at all. I found that even ng-click in the input text also is not working.So anyone please help on how to enable bootstarp date-picker in angular ui-grid
Yes as i think it is because the HTML code is not compiled when we are using it directly on editableCellTemplate.
For more info on how Angular Template Compiling Works refer here
Angular Template Compiling
Here's what i do to resolve this issue. I replaced my column defs editableCellTemplate to the following
columnDefs : {
field:'accbirthdate',displayName :"Birth Date",enableCellEditOnFocus: true,editableCellTemplate: '<input type="text" class="form-control" datepicker-popup="dd/MM/yyyy" ng-class="\'colt\' + col.index" ng-model="row.entity[col.field]" datepicker-append-to-body="true" is-open="istableDate" close-text="Close" table-date/>'}
}
as like gridEditor i created my own directive in my directive.js i have created the directive
app.directive('tableDate',function($filter){
function parseDateString(dateString) {
if (typeof(dateString) === 'undefined' || dateString === '') {
return null;
}
var parts = dateString.split('/');
if (parts.length !== 3) {
return null;
}
var year = parseInt(parts[2], 10);
var month = parseInt(parts[1], 10);
var day = parseInt(parts[0], 10);
if (month < 1 || year < 1 || day < 1) {
return null;
}
return new Date(year, (month - 1), day);
}
function pad(s) { return (s < 10) ? '0' + s : s; }
return {
priority: -100, // run after default uiGridEditor directive
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
scope.istableDate = false;
scope.$on( 'uiGridEventBeginCellEdit', function () {
scope.istableDate = true;
});
element.on("click",function(){
scope.istableDate = true;
});
element.bind( 'blur', function () {
if(!scope.istableDate){
scope.$emit( 'uiGridEventEndCellEdit' );
}else{
scope.istableDate = false;
}
}); //when leaving the input element, emit the 'end cell edit' event
if (ngModel) {
ngModel.$formatters.push(function (modelValue) {
var modelValue= new Date(modelValue);
ngModel.$setValidity(null,(!modelValue || !isNaN(modelValue.getTime())));
return $filter('date')(modelValue, 'dd/MM/yyyy');
});
ngModel.$parsers.push(function (viewValue) {
if (viewValue ) {
var dateString = [pad(viewValue.getDate()), pad(viewValue.getMonth()+1), viewValue.getFullYear()].join('/')
var dateValue = parseDateString(dateString);
ngModel.$setValidity(null, (dateValue && !isNaN(dateValue.getTime())));
return dateValue;
}
else {
ngModel.$setValidity(null, true);
return null;
}
});
}
}
};
});
My Date format is dd/MM/yyyy, choose yours once we emit the event it will mentioned as changed.
Now i have my bootstrap date-picker working for my ui-grid on all browsers.
If you have any doubt on this feel free to ask me. i Spend One day on this and I would like to share my experience to others.
Oops not in IE6 :)
I got this same issue before one moth ago. but i can't find out the solution. So i change my mind to custom grid.
I have using table, tr,td tags
see this is my html code
<table ng-show="TimeSheetList.length!==0" class="table">
<tr>
<th style="background-color: #BBE1EF">Start Date</th>
<th style="background-color: #BBE1EF">Start Time</th>
<th style="background-color: #BBE1EF">End Time</th>
<th style="background-color: #BBE1EF">Total Hours</th>
<th style="background-color: #BBE1EF">Description</th>
<th style="background-color: #BBE1EF">Remarks</th>
</tr>
<tr ng-repeat="timesheetlist in TimeSheetList">
<td ng-dblclick="ChangeVal(this,'StartDate')"><span ng-hide="timesheetlist.IsEditStartDate">{{timesheetlist.StartDate}}</span>
<input style="width: 150px" type="text" class="form-control" date-time required="true" view="hours" partial="true" ng-blur="UpdateTimeSheet(this.timesheetlist)" id="StartDate{{$index}}" ng-show="timesheetlist.IsEditStartDate" ng-model="timesheetlist.StartDate" />
</td>
<td><span ng-dblclick="ChangeVal(this,'StartTime')" ng-hide="timesheetlist.IsEditStartTime">{{timesheetlist.StartTime}}</span>
<timepicker hour-step="1" minute-step="1" show-meridian="true" ng-change="UpdateTimeSheet(this.timesheetlist)" ng-blur="UpdateTimeSheet(this.timesheetlist)" id="StartTime{{$index}}" ng-show="timesheetlist.IsEditStartTime" ng-model="timesheetlist.StartTime"></timepicker>
</td>
<td><span ng-dblclick="ChangeVal(this,'EndTime')" ng-hide="timesheetlist.IsEditEndTime">{{timesheetlist.EndTime}}</span>
<timepicker hour-step="1" minute-step="1" show-meridian="true" ng-change="UpdateTimeSheet(this.timesheetlist)" ng-blur="UpdateTimeSheet(this.timesheetlist)" id="EndTime{{$index}}" ng-show="timesheetlist.IsEditEndTime" ng-model="timesheetlist.EndTime"></timepicker>
</td>
<td>
<input type="text" readonly="true" class="form-control" ng-model="timesheetlist.TotalHours" style="width: 200px" autofocus="">
</td>
<td><span ng-dblclick="ChangeVal(this,'Description')" ng-hide="timesheetlist.IsEditDescription">{{timesheetlist.Description}}</span>
<input style="width: 200px" type="text" class="form-control" ng-blur="UpdateTimeSheet(this.timesheetlist)" ng-show="timesheetlist.IsEditDescription" ng-model="timesheetlist.Description" /></td>
<td><span ng-dblclick="ChangeVal(this,'Remarks')" ng-hide="timesheetlist.IsEditRemarks">{{timesheetlist.Remarks}}</span>
<input style="width: 200px" type="text" class="form-control" ng-blur="UpdateTimeSheet(this.timesheetlist)" ng-show="timesheetlist.IsEditRemarks" ng-model="timesheetlist.Remarks" /></td>
</tr>
</table>
this is my controller code
function loadTimeSheets(date) {
$http({
method: 'GET',
url: rootUrl + '/api/TimeSheet/LoadTimeSheet?date=' + date,
headers: {
'Content-Type': "application/json; charset=utf-8"
}
}).success(function (response) {
$scope.TimeSheetList = response;
if ($scope.TimeSheetList.length == 0) {
alert('You did not add your works in this date');
}
}).error(function (response, errorCode) {
if (errorCode == 444) {
//toastr.error('Your email address is does not verrified ', 'Error');
}
})
}
I hope you can customize my grid with what you want.
If you don't like that, then you can go to with ng-Grid
I also got this problem with datepicker and decidet to add a default jquery-ui one. Actually, you can add anyone.
The code below requires some explanation.
First, you template should looks like that:
editableCellTemplate: '<input datepicker ng-model="MODEL_COL_FIELD" readonly>'
It must contain a ng-model attribute with a value MODEL_COL_FIELD. This value means that your input will be bind with a cell's model. I.e. the cell after stopping an edit mode the cell (it's usually a <div> element) will get the value from our input. The MODEL_COL_FIELD value is replaced by ui-grid engine with real name of model. In our case this is row.entity['startDate']. You can see this when you read a property $attrs.ngModel.
The
eval('$scope.' + $attrs.ngModel + ' = "' + value + '";');
line appears like that because we can't know a name of model. This name is designated with ui-grid engine automatically. Instead of eval you can create a function allowing to access a value of $scope parsing $attrs.ngModel value.
Second, when you create some directive, all DOM modifications should be replaced in the compile section.
Third, if you create your own directive for edit-mode in ui-grid, you must fire BEGIN_CELL_EDIT, CANCEL_CELL_EDIT and END_CELL_EDIT events manually (see http://ui-grid.info/docs/#/tutorial/201_editable). In our code we do this in onClose property of datepicker. We don't use onSelect because we can loose a focus on our input and the datepicker will be closed, but the input will be still opened. To stop an edit mode we must fire the END_CELL_EDIT event:
$scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);
The JS code:
var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainController', function($scope) {
$scope.gridOptions = {
columnDefs: [{
name: 'startDate',
editableCellTemplate: '<input datepicker ng-model="MODEL_COL_FIELD" readonly>',
enableCellEdit: true,
width: 150
}],
data: [{
startDate: ''
}]
};
});
app.directive('datepicker', ['uiGridEditConstants', function(uiGridEditConstants) {
return {
restrict: 'A',
require: 'ngModel',
compile: function() {
return {
pre: function($scope, $elm, $attrs) {},
post: function($scope, $elm, $attrs) {
function setValueToScope(value) {
eval('$scope.' + $attrs.ngModel + ' = "' + value + '";');
$scope.$apply();
}
$elm = $($elm);
$elm.datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function(date) {
setValueToScope(date);
},
onClose: function() {
$scope.$emit(uiGridEditConstants.events.END_CELL_EDIT);
}
});
$elm[0].focus();
}
};
}
};
}]);
The full code and how it is work you can see here: http://plnkr.co/edit/NfMuGpNDqIjvoAGJ2R1B
I have a bunch of table rows which include inputs and buttons, namely. I would like to have a Popover display to the right of an input for a row if the value isn't matching the requirements defined. The button will also be disabled until the value of the input is correct.
Relevant HTML:
<div class="row col-md-4">
<table ng-controller="TestController" style="width: 100%">
<tr ng-repeat="element in model.InvoiceNumbers">
<td><input ng-model="element.id"
popover="Invoice must match ##-####!"
popover-placement="right"
popover-trigger="{{ { false: 'manual', true: 'blur'}[!isValidInvoice(element.id)] }}"
popover-title="{{element.id}}"/></td>
<td>{{element.id}}</td>
<td><button ng-disabled="!isValidInvoice(element.id)">Approve</button></td>
</tr>
</table>
</div>
Relevant JavaScript:
app.controller("TestController", function ($scope) {
$scope.model = {
InvoiceNumbers : [
{ id: '12-1234' },
{ id: '12-1235' },
{ id: '1234567' },
{ id: '1' },
{ id: '' }],
};
$scope.isValidInvoice = function (invoice) {
if (invoice == null) return false;
if (invoice.length != 7) return false;
if (invoice.search('[0-9]{2}-[0-9]{4}') == -1) return false;
return true;
};
});
The button gets disabled correctly on my local solution. However, I can't get the Popover to work; it behaves as if the model in its scope isn't getting updated. So, I looked through several links here (though most were from 2013 so I'd imagine a bit has changed) and their problems seemed to be solved by removing primitive binding. That didn't fix anything here. I added some console.log() lines in the function getting called from the Popover, and it was getting the correct value from the model each time. I also added a title to the Popover to show that its seeing the right value from the model.After seeing the log showing that it should be working correctly, I've run out of ideas.
The issue is element.id isn't updating dynamically within the trigger (it keeps its initial value, unlike popover-title which updates with the model). Is there something I did wrong?
Also, I've only been working with angular for a day so if you all have any suggestions on better ways to accomplish this, I'm open to suggestions.
Plunker: http://plnkr.co/edit/tiooSxSDgzXhbmIty3Kc?p=preview
Thanks
Found a solution on the angular-ui github page that involved adding these directives:
.directive( 'popPopup', function () {
return {
restrict: 'EA',
replace: true,
scope: { title: '#', content: '#', placement: '#', animation: '&', isOpen: '&' },
templateUrl: 'template/popover/popover.html'
};
})
.directive('pop', function($tooltip, $timeout) {
var tooltip = $tooltip('pop', 'pop', 'event');
var compile = angular.copy(tooltip.compile);
tooltip.compile = function (element, attrs) {
var parentCompile = compile(element, attrs);
return function(scope, element, attrs ) {
var first = true;
attrs.$observe('popShow', function (val) {
if (JSON.parse(!first || val || false)) {
$timeout(function () {
element.triggerHandler('event');
});
}
first = false;
});
parentCompile(scope, element, attrs);
}
};
return tooltip;
});
And here's the changes I made to the controller and view to make it work like I wanted in the original question:
<div class="row col-md-4">
<table ng-controller="TestController" style="width: 100%">
<tr ng-repeat="element in model.InvoiceNumbers">
<td><input ng-model="element.id"
pop="Invoice must match ##-####!"
pop-placement="right"
pop-show="{{element.showPop}}"
ng-blur="isValidInvoice($index, $event)" /></td>
<td>{{element.id}}</td>
<td><button ng-disabled="!isValidInvoice($index)">Approve</button></td>
</tr>
</table>
</div>
JavaScript:
app.controller("TestController", function ($scope) {
$scope.model = {
InvoiceNumbers: [
{ id: '12-1234', showPop: false },
{ id: '12-1235', showPop: false },
{ id: '1234567', showPop: false },
{ id: '1', showPop: false },
{ id: '', showPop: false }]
};
$scope.isValidInvoice = function ($index, $event) {
var obj = $scope.model.InvoiceNumbers[$index];
var isValid = function () {
if (obj.id === null) return false;
if (obj.id.length != 7) return false;
if (obj.id.search('[0-9]{2}-[0-9]{4}') == -1) return false;
return true;
};
if ($event != null && $event.type == "blur") obj.showPop = !isValid();
return isValid();
};
});
Plunker: http://plnkr.co/edit/5m6LHbapxp5jqk8jANR2?p=preview
I am using AngularJS v1.2.0-rc.3.
I have a model y with a 1 to many relationship with model x.
Initially, I had a form for model y with a multiple select for xs, something like this:
Controller:
function test($scope) {
$scope.xs = [
{id:1, value:'value 1'},
{id:2, value:'value 2'},
{id:3, value:'value 3'}
];
$scope.y = {xs:[2]};
}
View:
<div ng-controller="test">
<select multiple ng-model="y.xs" ng-options="x.id as x.value for x in xs">
</select>
</div>
The result is an array of the selected items.
http://plnkr.co/edit/s3tvvHeyE17TVH5KNkPZ
All fine and good, but I needed to change it to a checkbox list and found I couldn't use an array anymore.
I tried using the repeater's index, like this:
<div ng-repeat="x in xs">
<input type="checkbox" ng-model="y.xs[$index]" ng-true-value="{{x.id}}"/>
{{x.value}}
</div>
but to pre-select the 2nd item for example, I needed to use this:
$scope.y = {xs: [null, '2']};
which was useless.
http://plnkr.co/edit/9UfbKF2gFLnhTOKu3Yep
After a bit of searching, it seems the recommended method is to use an object hash, like so
<div ng-repeat="x in xs">
<input type="checkbox" ng-model="y.xs[x.id]"/>
{{x.value}}
</div>
http://plnkr.co/edit/Xek8alEJbwq3g0NAPMcF
but if items are de-selected, you end up with something that looks like this:
y={
"xs": {
"1": false,
"2": false,
"3": false
}
}
so I ended up adding a watch expression to filter out the false values, like this:
$scope.$watch('y.xs', function(n) {
for (var k in n)
if (n.hasOwnProperty(k) && !n[k])
delete n[k];
}, true);
http://plnkr.co/edit/S1C1g5fYKzUZb7b0pRtp
It works but it feels unsatisfactory.
As this is such a common use case, I'm interested to know how others are solving it.
Update
Following the suggestion to use a custom directive, I came up with this solution which maintains the selection as a list.
Directive:
angular.module('checkbox', [])
.directive('checkboxList', function () {
return {
restrict: 'A',
replace: true,
scope: {
selection: '=',
items: '=',
value: '#',
label: '#'
},
template: '<div ng-repeat="item in list">' +
'<label>' +
'<input type="checkbox" value="{{item.value}}" ng-checked="item.checked" ng-click="toggle($index)"/>' +
'{{item.label}}' +
'</label>' +
'</div>',
controller: ['$scope', function ($scope) {
$scope.toggle = function (index) {
var item = $scope.list[index],
i = $scope.selection.indexOf(item.value);
item.checked = !item.checked;
if (!item.checked && i > -1) {
$scope.selection.splice(i, 1);
} else if (item.checked && i < 0) {
$scope.selection.push(item.value);
}
};
$scope.$watch('items', function (value) {
$scope.list = [];
if (angular.isArray(value)) {
angular.forEach(value, function (item) {
$scope.list.push({
value: item[$scope.value],
label: item[$scope.label],
checked: $scope.selection.indexOf(item[$scope.value]) > -1
});
});
}
}, true);
}]
};
});
View:
<div checkbox-list
selection="a.bs"
items="bs"
value="id"
label="name">
</div>
http://plnkr.co/edit/m7yH9bMPuRCg5OP2u0VX
I had to write a multi select directive myself in the past, feel free to grab it at http://isteven.github.io/angular-multi-select.
As for the data binding approach, my data structure is actually quite similar with yours, but in my approach I added one more property which represent the checkbox state.
Example, with your input above, I added "checked":
$scope.xs = [
{ id:1, value:'value 1', checked: false },
{ id:2, value:'value 2', checked: false },
{ id:3, value:'value 3', checked: false }
];
And I pass it to the directive like this:
<div
multi-select
input-model="xs"
button-label="value"
item-label="id value"
tick-property="checked" >
</div>
When you tick / untick a checkbox, the directive will modify the input model $scope.xs.checked accordingly. To achieve this, i attach a click handler to each checkbox. This handler will call a function in which I pass the checkbox object as the function parameter. This function will then synchronize the checkbox state and the model.
To get the selected / ticked checkboxes, you will only need to loop $scope.xs over where .checked === true
Example:
angular.forEach( $scope.xs, function( value, key ) {
if ( value.checked === true ) {
// Do your stuff here
}
});
Pardon my bad English, and hope this helps. Cheers.
I went the directive approach. It leaves me with a list of ids for the objects that are checked. This is a fiddle for it JSFIDDLE.
This is what my html looks like.
<div ng-app="checkbox" ng-controller="homeCtrl">
<div ng-repeat="item in list">
<input type="checkbox" checkbox-group />
<label>{{item.value}}</label>
</div>{{array}}
<br>{{update()}}
</div>
And my directive
.directive("checkboxGroup", function () {
return {
restrict: "A",
link: function (scope, elem, attrs) {
// Determine initial checked boxes
if (scope.array.indexOf(scope.item.id) !== -1) {
elem[0].checked = true;
}
// Update array on click
elem.bind('click', function () {
var index = scope.array.indexOf(scope.item.id);
// Add if checked
if (elem[0].checked) {
if (index === -1) scope.array.push(scope.item.id);
}
// Remove if unchecked
else {
if (index !== -1) scope.array.splice(index, 1);
}
// Sort and update DOM display
scope.$apply(scope.array.sort(function (a, b) {
return a - b
}));
});
}
}
});
I needed a checkbox solution that would also display values that were not in the list of possible choices (what if that list had changed since the user filled out the form?).
Also, I didn't think a watch function was necessary.
Finally, I needed to pass in the form in so I could set it to dirty if the user had toggled any of the checkboxes.
Caveat: In my case I only needed an array of strings as my model, which isn't exactly what the poster was using for his model.
HTML:
<multiple-checkbox
form="form"
selections="model"
options="options">
</multiple-checkbox>
Directive:
.directive("multipleCheckbox", function () {
return {
restrict: 'E',
scope: {
form: '=',
selections: '=',
options: '=',
},
template:
'<div>' +
'<div class="checkbox" ng-repeat="item in options">' +
'<label>' +
'<input type="checkbox" value="{{$index}}" ng-checked="selections.indexOf(item) > -1" ng-click="toggle(item)"/>' +
'{{item}}' +
'</label>' +
'</div>' +
'<div class="checkbox" ng-repeat="item in selections" ng-if="options.indexOf(item) === -1">' +
'<label>' +
'<input type="checkbox" value="{{options.length + $index}}" ng-checked="selections.indexOf(item) > -1" ng-click="toggle(item)"/>' +
'<strong>Other: </strong>{{item}}' +
'</label>' +
'</div>' +
'</div>',
controller: ['$scope', function ($scope) {
// Executed when the checkboxes are toggled
$scope.toggle = function (item) {
// set the form to dirty if we checked the boxes
if ($scope.form) $scope.form.$dirty = true;
// get the index of the selection
var index = -1;
if (angular.isArray($scope.selections)) {
index = $scope.selections.indexOf(item);
}
// if it's not already an array, initialize it
else $scope.selections = [];
if (index > -1) {
// remove the item
$scope.selections.splice(index, 1);
// if the array is empty, set it to null
if ($scope.selections.length === 0) {
$scope.selections = null;
}
}
else if (index < 0) {
// add the item
$scope.selections.push(item);
}
};
}],
};
});