JSFiddle - React, Tailwind, and code Playground

by rapsac

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveAPP">
    <div ng-controller="directiveController">
        <data-form-select data-label="Type" 
            data-id="contentTypeSelect" 
            data-ng-change="home.configChanged(true)" 
            ng-model="ctrl.configService.admin.contentTypeId" 
            data-options="ctrl.contentType.dataPlus">
        </data-form-select>                       
       {{ctrl.configService.admin.contentTypeId}}        
       <div ng-repeat="item in ctrl.contentType.dataPlus | filter:{'id':ctrl.configService.admin.contentTypeId}">
        id : {{item.id}}<br/>
        name : {{item.name}}
       </div>
    </div>
</div>

JavaScript

angular.module("directiveAPP", [])
    .controller("directiveController", function ($scope, $rootScope, $filter) {
    var admin = [];
    var configService = {
        "admin": admin
    };
    var contentType = {
        "dataPlus": [{
            "id": 1,
                "name": "ABC"
        }, {
            "id": 2,
                "name": "DEF"
        }, {
            "id": 3,
                "name": "GHI"
        }]
    };
    $scope.home = {};
    $scope.ctrl = {
        "configService": configService
    };
    $scope.ctrl.configService.admin["contentTypeId"] = 0;
    $scope.ctrl["contentType"] = contentType;
    $scope.home.configChanged = function (data) {};
}).directive("formSelect", function () {
    return {
        restrict: 'AE',
        require: 'ngModel',
        scope: {
            label: '=',
            id: '=',
            ngChange: "&",
            ngModel: "=",
            options: "="
        },
        template: '<div><span>{{label}}</span><select id="{{id}}" ng-change="ngChange()" ng-model="ngModel" ng-options="item.id as item.name for item in options"></div>',
        controller: function ($scope, $element, $attrs) {
            $scope.label = $attrs.label;
            $scope.id = $attrs.id;
        }
    };
});