Skip to content

Commit 2bc4e71

Browse files
joaonetojoaoneto
committed
fixed ng-required ref #9 
1 parent 17ce358 commit 2bc4e71

File tree

3 files changed

+80
-42
lines changed

3 files changed

+80
-42
lines changed

‎demo/index.html

+46-20
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<script src="../bower_components/bootstrap-select/bootstrap-select.js"></script>
1515
<script src="../bower_components/angular/angular.js"></script>
1616

17-
<script src="../build/angular-bootstrap-select.js"></script>
17+
<script src="../src/angular-bootstrap-select.js"></script>
1818

1919
<script src="marked.js"></script>
2020
<script src="selectDemo.js"></script>
@@ -25,23 +25,49 @@
2525
<section id="directives-bootstrap-select" ng-controller="SelectCtrl">
2626
<div class="page-header">
2727
<h1>Angular bootstrap-select</h1>
28-
<code>Form: {{form || 'undefined'}}</code><br>
29-
<code>Color: {{color || 'undefined'}}</code>
28+
<code>foo: {{formData.foo || 'undefined'}}</code><br>
29+
<code>color: {{formData.color || 'undefined'}}</code><br>
30+
<code>Form1.$dirty: {{form1.$dirty | json}}</code><br>
31+
<code>Form1.$pristine: {{form1.$pristine | json}}</code><br>
32+
<code>Form1.field1.$dirty: {{form1.field1.$dirty | json}}</code><br>
33+
<code>Form1.field1.$invalid: {{form1.field1.$invalid | json}}</code><br>
34+
<code>Form1.field1.$valid: {{form1.field1.$valid | json}}</code><br>
35+
<code>Form1.field1.$viewValue: {{form1.field1.$viewValue | json}}</code><br>
36+
<code>Form1.field1.$modelValue: {{form1.field1.$modelValue | json}}</code><br>
37+
<code>Form1.field1.$error: {{form1.field1.$error | json}}</code><br>
38+
<code>Form1.field2: {{form1.field2.$error | json}}</code><br>
3039
</div>
31-
32-
<select toggle selectpicker ng-model="form">
40+
<select toggle selectpicker ng-hide="true" ng-model="teste">
41+
<option value="">Select one</option>
3342
<option>Mustard</option>
3443
<option>Ketchup</option>
3544
<option>Relish</option>
3645
</select>
37-
38-
<select ng-model="form" class="dropup" toggle selectpicker="{ dropupAuto: false }">
39-
<option>Mustard</option>
40-
<option>Ketchup</option>
41-
<option>Relish</option>
42-
</select>
43-
44-
<select toggle selectpicker ng-model="color" class="" ng-options="color.name for color in colors"></select>
46+
<form name="form1" ng-submit="submit()" novalidate>
47+
<select name="field1" ng-model="formData.foo" toggle selectpicker="{}" ng-required="true">
48+
<option value="">Select one</option>
49+
<option>Mustard</option>
50+
<option>Ketchup</option>
51+
<option>Relish</option>
52+
</select>
53+
54+
<select name="field2" ng-model="formData.foo" class="dropup" toggle selectpicker="{ dropupAuto: false }" ng-required="false">
55+
<option value="">Select one</option>
56+
<option>Mustard</option>
57+
<option>Ketchup</option>
58+
<option>Relish</option>
59+
</select>
60+
61+
<select name="field3" toggle ng-model="formData.color.name" selectpicker class="" ng-options="color.name as color.name for color in colors">
62+
<option value="">Select one</option>
63+
</select>
64+
65+
<select name="field4" toggle ng-model="formData.color.name" selectpicker class="" ng-options="color.name as color.name for color in colors">
66+
<option value="">Select one</option>
67+
</select>
68+
69+
<button type="submit">Submit</button>
70+
</form>
4571

4672
</section>
4773

@@ -73,20 +99,20 @@ <h2>README.md</h2>
7399
### Html snippet
74100

75101
```html
76-
<script src="../bower_components/angular-bootstrap-select/build/angular-bootstrap-select.min.js"></script>
102+
&lt;script src="../bower_components/angular-bootstrap-select/build/angular-bootstrap-select.min.js"&gt;&lt;/script&gt;
77103

78-
<select class="selectpicker">
79-
<option>Mustard</option>
80-
<option>Ketchup</option>
81-
<option>Relish</option>
82-
</select>
104+
&lt;select class="selectpicker"&gt;
105+
&lt;option&gt;Mustard&lt;/option&gt;
106+
&lt;option&gt;Ketchup&lt;/option&gt;
107+
&lt;option&gt;Relish&lt;/option&gt;
108+
&lt;/select&gt;
83109
```
84110

85111
## TODO
86112

87113
Implement ngOptions with selectpicker
88114
```html
89-
<select ng-model="form" class="selectpicker" ng-options="color.name for color in colors"></select>
115+
&lt;select ng-model="form" class="selectpicker" ng-options="color.name for color in colors"&gt;&lt;/select&gt;
90116
```
91117

92118
## Testing

‎demo/selectDemo.js

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
angular.module('selectDemoApp', ['marked', 'angular-bootstrap-select', 'angular-bootstrap-select.extra']);
22

3-
function SelectCtrl($scope) {
4-
$scope.form = undefined;
5-
$scope.color = 1;
3+
function SelectCtrl($scope, $timeout) {
4+
$scope.formData = {};
5+
$scope.formData.color = { name: 'Green' };
6+
67
$scope.colors = [{ name: 'Red' }, { name: 'Green' }, { name: 'Blue' }];
8+
9+
$scope.submit = function () {
10+
$scope.form1.$setPristine();
11+
console.log($scope.form1);
12+
}
713
}
814

915

‎src/angular-bootstrap-select.js

+25-19
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,24 @@ angular.module('angular-bootstrap-select.extra', [])
44
return {
55
restrict: 'A',
66
link: function (scope, element, attrs) {
7-
//prevent directive from attaching itself to everything that defines a toggle attribute
7+
// prevent directive from attaching itself to everything that defines a toggle attribute
88
if (!element.hasClass('selectpicker')) {
99
return;
1010
}
1111

1212
var target = element.parent();
13+
var toggleFn = function (e) {
14+
target.toggleClass('open');
15+
e.stopPropagation();
16+
};
1317

14-
element.bind('click', function () {
15-
target.toggleClass('open')
16-
});
18+
element.bind('click', toggleFn);
19+
element.next().find('li').bind('click', toggleFn);
1720

18-
element.next().find('li').bind('click', function () {
19-
target.toggleClass('open')
20-
})
21+
scope.$on('$destroy', function () {
22+
console.log('lalal');
23+
element.unbind('click', toggleFn);
24+
});
2125
}
2226
};
2327
});
@@ -27,29 +31,31 @@ angular.module('angular-bootstrap-select', [])
2731
return {
2832
restrict: 'A',
2933
require: '?ngModel',
30-
priority: 1001,
34+
priority: 10,
3135
compile: function (tElement, tAttrs, transclude) {
3236
tElement.selectpicker($parse(tAttrs.selectpicker)());
37+
// tElement.selectpicker('refresh');
3338
return function (scope, element, attrs, ngModel) {
34-
if (angular.isUndefined(ngModel)){
35-
return;
36-
}
39+
if (!ngModel) return;
3740

38-
scope.$watch(attrs.ngModel, function () {
39-
$timeout(function () {
40-
element.selectpicker('val', element.val());
41-
element.selectpicker('refresh');
41+
scope.$watch(attrs.ngModel, function (newVal, oldVal) {
42+
scope.$evalAsync(function () {
43+
if (newVal !== oldVal) {
44+
console.log('watch --->', newVal, oldVal)
45+
if (!attrs.ngOptions) element.val(newVal);
46+
element.selectpicker('refresh');
47+
}
4248
});
4349
});
4450

4551
ngModel.$render = function () {
46-
$timeout(function () {
47-
element.selectpicker('val', ngModel.$viewValue || '');
52+
scope.$evalAsync(function () {
53+
console.log('render --->', element.val());
4854
element.selectpicker('refresh');
4955
});
50-
};
56+
}
5157

52-
ngModel.$viewValue = element.val();
58+
// element.selectpicker('refresh');
5359
};
5460
}
5561

0 commit comments

Comments
 (0)