JSFiddle - React, Tailwind, and code Playground

by Nicolas Lips

HTML

<div ng-app="app">
  <div ng-controller="QuestionsController as ctrl">
    <pre>{{ctrl|json}}</pre>
    <question ng-model="ctrl.b" ng-required="ctrl.a">b<b>AAAA</b>bb</question>
    <question ng-model="ctrl.a">aaaa</question>
    <table border="1">
      <tr question-row ng-model="ctrl.a"><td>aaaa</td></tr>
      <tr question-row ng-model="ctrl.b" ng-required="ctrl.a"><td><ul>
      <li>aaaa</li><li>bbbb</li>
      </ul></td></tr>
    </table>
  </div>  
</div>

CSS

tr.ng-invalid {
  background-color:red;
}

JavaScript

angular
.module('app',[])
.controller('OptionalYesNoController', [function() {
	var vm = this;
  vm.value = true;
}])
.controller('QuestionsController', [function() {
	var vm = this;
  vm.a = null;
  vm.b = null;
}])
.directive('question', function() {
  return {
  	restrict: 'E',
    transclude: true,
    require: 'ngModel',
  	scope: {
      ngModel: '='
    },
    template: '\
    	<div>\
      	<div ng-transclude></div>\
        <label>\
      		<input type="checkbox" ng-model="ngModel" ng-true-value="true" ng-false-value="null"/>\
      		Oui\
    		</label>\
    		<label>\
      		<input type="checkbox" ng-model="ngModel" ng-true-value="false" ng-false-value="null"/>\
      		Non\
    		</label>\
        {{value}}\
  		</div>'
  };
})
.directive('questionRow', function() {
  return {
  	restrict: 'A',
    transclude: true,
    require: 'ngModel',
  	scope: {
      ngModel: '='
    },
    link: function(scope, elem, attrs, controller, transcludeFn) {
      var item = transcludeFn(scope, function(clone) {
        return clone.children();
      });
      elem.prepend(item);
    },    
    template: '\
      <td>\
        <label>\
      		<input type="checkbox" ng-model="ngModel" ng-true-value="true" ng-false-value="null"/>\
      		Oui\
    		</label>\
      </td>\
      <td>\
    		<label>\
      		<input type="checkbox" ng-model="ngModel" ng-true-value="false" ng-false-value="null"/>\
      		Non\
    		</label>\
  		</td>'
  };
});