JSFiddle - React, Tailwind, and code Playground

by satsukitv

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://raw.githack.com/satsukitv/angular-gender-field/master/gender-field.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container" ng-app="testGenders">
    <form ng-controller="TestController">
        <h3>
            <a href="https://github.com/satsukitv/angular-gender-field">Github Repo</a>
        </h3>
        <h2>Bootstrap.js Demo</h2>
        <div class="form-group">
          <label>Gender</label>
          <gender-field ng-model="user.gender" with-bootstrap="true" with-bootstrap-js="true" scrollable-height="'200px'"></gender-field>
        </div>
        
        <h2>&lt;select&gt; Demo</h2>
        <p>Select box changes to input box when "Other" is selected</p>
        <div class="form-group">
          <label>Gender</label>
          <gender-field select-classes="'form-control'" ng-model="user.gender"></gender-field>
        </div>
        
        <h2>ngModel Binding Demo</h2>
        <div class="form-group">
            <button class="btn btn-default" type="button" ng-click="changeProgrammatically()">Change to Agender</button>
        </div>
        
        <h2>Output View</h2>
        <pre>user.gender: {{user.gender}}</pre>
    </form>
</div>

JavaScript

/* Using https://github.com/satsukitv/angular-gender-field */
var app = angular.module('testGenders', ['gender-field']);
app.controller('TestController', function($scope) {
    $scope.user = {gender: "Trans Woman"};
    
    $scope.changeProgrammatically = function() {
        $scope.user.gender = "Agender";
    }
})