Added ng:disabled, ng:checked, ng:multiple, ng:readonly, ng:selected to markup.js.

Also added coresponding descriptions  live examples and tests for each directive to be displayed on the website.

Closes angular#351

Author: Di Peng

CHANGELOG.md

@@ -4,6 +4,7 @@
 ### New Features
 - Added prepend() to jqLite
 - Added ng:options directive (http://docs.angularjs.org/#!angular.directive.ng:options)
+- Added ng:disabled, ng:selected, ng:checked, ng:multiple, ng:readonly directive.
 
 
 ### Bug Fixes

src/directives.js

@@ -384,7 +384,8 @@ var REMOVE_ATTRIBUTES = {
   'disabled':'disabled',
   'readonly':'readOnly',
   'checked':'checked',
-  'selected':'selected'
+  'selected':'selected',
+  'multiple':'multiple'
 };
 /**
  * @workInProgress

src/markups.js

@@ -235,8 +235,171 @@ angularTextMarkup('option', function(text, textNode, parentElement){
  * @param {template} template any string which can contain `{{}}` markup.
  */
 
+/**
+ * @workInProgress
+ * @ngdoc directive
+ * @name angular.directive.ng:disabled
+ *
+ * @description
+ *
+ * The following markup will make the button enabled on Chrome/Firefox but not on IE8 and older IEs:
+ * <pre>
+ * <div ng:init="scope = { isDisabled: false }">
+ *  <button disabled="{{scope.isDisabled}}">Disabled</button>
+ * </div>
+ * </pre>
+ *
+ * the HTML specs do not require browsers preserve the special attributes such as disabled.(The presense of them means true and absense means false)
+ * This prevents the angular compiler from correctly retrieving the binding expression.
+ * To solve this problem, we introduce ng:disabled.
+ *
+ * @example
+    <doc:example>
+      <doc:source>
+        Click me to toggle: <input type="checkbox" name="checked"><br/>
+        <button name="button" ng:disabled="{{checked}}">Button</button>
+      </doc:source>
+      <doc:scenario>
+        it('should toggle button', function() {
+          expect(element('.doc-example-live :button').attr('disabled')).toBeFalsy();
+          input('checked').check();
+          expect(element('.doc-example-live :button').attr('disabled')).toBeTruthy();
+        });
+      </doc:scenario>
+    </doc:example>
+ *
+ * @element ANY
+ * @param {template} template any string which can contain '{{}}' markup.
+ */
+
+
+/**
+ * @workInProgress
+ * @ngdoc directive
+ * @name angular.directive.ng:checked
+ *
+ * @description
+ * the HTML specs do not require browsers preserve the special attributes such as checked.(The presense of them means true and absense means false)
+ * This prevents the angular compiler from correctly retrieving the binding expression.
+ * To solve this problem, we introduce ng:checked.
+ * @example
+    <doc:example>
+      <doc:source>
+        Check me to check both: <input type="checkbox" name="master"><br/>
+        <input id="checkSlave" type="checkbox" ng:checked="{{master}}">
+      </doc:source>
+      <doc:scenario>
+        it('should check both checkBoxes', function() {
+          expect(element('.doc-example-live #checkSlave').attr('checked')).toBeFalsy();
+          input('master').check();
+          expect(element('.doc-example-live #checkSlave').attr('checked')).toBeTruthy();
+        });
+      </doc:scenario>
+    </doc:example>
+ *
+ * @element ANY
+ * @param {template} template any string which can contain '{{}}' markup.
+ */
+
+
+/**
+ * @workInProgress
+ * @ngdoc directive
+ * @name angular.directive.ng:multiple
+ *
+ * @description
+ * the HTML specs do not require browsers preserve the special attributes such as multiple.(The presense of them means true and absense means false)
+ * This prevents the angular compiler from correctly retrieving the binding expression.
+ * To solve this problem, we introduce ng:multiple.
+ *
+ * @example
+     <doc:example>
+       <doc:source>
+         Check me check multiple: <input type="checkbox" name="checked"><br/>
+         <select id="select" ng:multiple="{{checked}}">
+           <option>Misko</option>
+           <option>Igor</option>
+           <option>Vojita</option>
+           <option>Di</option>
+         </select>
+       </doc:source>
+       <doc:scenario>
+         it('should toggle multiple', function() {
+           expect(element('.doc-example-live #select').attr('multiple')).toBeFalsy();
+           input('checked').check();
+           expect(element('.doc-example-live #select').attr('multiple')).toBeTruthy();
+         });
+       </doc:scenario>
+     </doc:example>
+ *
+ * @element ANY
+ * @param {template} template any string which can contain '{{}}' markup.
+ */
+
+
+/**
+ * @workInProgress
+ * @ngdoc directive
+ * @name angular.directive.ng:readonly
+ *
+ * @description
+ * the HTML specs do not require browsers preserve the special attributes such as readonly.(The presense of them means true and absense means false)
+ * This prevents the angular compiler from correctly retrieving the binding expression.
+ * To solve this problem, we introduce ng:readonly.
+ * @example
+    <doc:example>
+      <doc:source>
+        Check me to make text readonly: <input type="checkbox" name="checked"><br/>
+        <input type="text" ng:readonly="{{checked}}" value="I'm Angular"/>
+      </doc:source>
+      <doc:scenario>
+        it('should toggle readonly attr', function() {
+          expect(element('.doc-example-live :text').attr('readonly')).toBeFalsy();
+          input('checked').check();
+          expect(element('.doc-example-live :text').attr('readonly')).toBeTruthy();
+        });
+      </doc:scenario>
+    </doc:example>
+ *
+ * @element ANY
+ * @param {template} template any string which can contain '{{}}' markup.
+ */
+
+
+/**
+* @workInProgress
+* @ngdoc directive
+* @name angular.directive.ng:selected
+*
+* @description
+* the HTML specs do not require browsers preserve the special attributes such as selected.(The presense of them means true and absense means false)
+* This prevents the angular compiler from correctly retrieving the binding expression.
+* To solve this problem, we introduce ng:selected.
+* @example
+   <doc:example>
+     <doc:source>
+       Check me to select: <input type="checkbox" name="checked"><br/>
+       <select>
+         <option>Hello!</option>
+         <option id="greet" ng:selected="{{checked}}">Greetings!</option>
+       </select>
+     </doc:source>
+     <doc:scenario>
+       it('should select Greetings!', function() {
+         expect(element('.doc-example-live #greet').attr('selected')).toBeFalsy();
+         input('checked').check();
+         expect(element('.doc-example-live #greet').attr('selected')).toBeTruthy();
+       });
+     </doc:scenario>
+   </doc:example>
+* @element ANY
+* @param {template} template any string which can contain '{{}}' markup.
+*/
+
+
 var NG_BIND_ATTR = 'ng:bind-attr';
 var SPECIAL_ATTRS = {};
+
 forEach('src,href,checked,disabled,multiple,readonly,selected'.split(','), function(name) {
   SPECIAL_ATTRS['ng:' + name] = name;
 });

test/markupSpec.js

@@ -89,6 +89,56 @@ describe("markups", function(){
     expect(sortedHtml(element)).toEqual('<a ng:bind-attr="{"href":"{{url}}"}"></a>');
   });
 
+  it('should bind disabled', function() {
+    compile('<button ng:disabled="{{isDisabled}}">Button</button>');
+    scope.isDisabled = false;
+    scope.$eval();
+    expect(element.attr('disabled')).toBeFalsy();
+    scope.isDisabled = true;
+    scope.$eval();
+    expect(element.attr('disabled')).toBeTruthy();
+  });
+
+  it('should bind checked', function() {
+    compile('<input type="checkbox" ng:checked="{{isChecked}}" />');
+    scope.isChecked = false;
+    scope.$eval();
+    expect(element.attr('checked')).toBeFalsy();
+    scope.isChecked=true;
+    scope.$eval();
+    expect(element.attr('checked')).toBeTruthy();
+  });
+
+  it('should bind selected', function() {
+    compile('<select><option value=""></option><option ng:selected="{{isSelected}}">Greetings!</option></select>');
+    scope.isSelected=false;
+    scope.$eval();
+    expect(element.children()[1].selected).toBeFalsy();
+    scope.isSelected=true;
+    scope.$eval();
+    expect(element.children()[1].selected).toBeTruthy();
+  });
+
+  it('should bind readonly', function() {
+    compile('<input type="text" ng:readonly="{{isReadonly}}" />');
+    scope.isReadonly=false;
+    scope.$eval();
+    expect(element.attr('readOnly')).toBeFalsy();
+    scope.isReadonly=true;
+    scope.$eval();
+    expect(element.attr('readOnly')).toBeTruthy();
+  });
+
+  it('should bind multiple', function() {
+    compile('<select ng:multiple="{{isMultiple}}"></select>');
+    scope.isMultiple=false;
+    scope.$eval();
+    expect(element.attr('multiple')).toBeFalsy();
+    scope.isMultiple='multiple';
+    scope.$eval();
+    expect(element.attr('multiple')).toBeTruthy();
+  });
+
   it('should bind src', function() {
     compile('<img ng:src="{{url}}" />');
     scope.url = 'http://localhost/';