JSFiddle - React, Tailwind, and code Playground

by Lune Yu

HTML

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<div ng-controller="MyCtrl">
  <sampdir>
    {{msgClick}}
    <select ng-click="sortContent(selected)" ng-model="selected">
      <option ng-selected="item.selected" class="sort_option" value="{{item.value}}" ng-repeat="item in selectModel">
        {{item.htmlText}}
      </option>
    </select>
    {{selected}}
  </sampdir>
</div>

JavaScript

var myApp = angular.module('myApp', [])
  .controller("MyCtrl", MyCtrl)
  .directive("sampdir", sampdir);

function MyCtrl($scope) {
  $scope.d = 1
}

function sampdir() {
  return {
    restrict: 'E',
    replace: true,
    scope: {},
    link: function(scope, element, attributes) {
      scope.sortContent = function(item_) {
        scope.msgClick = "I clicked on an option element";
        console.log(item_);
      }
      scope.selectModel = [{
        value: "asc",
        htmlText: "A-Z",
        selected: ""
      }, {
        value: "desc",
        htmlText: "Z-A",
        selected: ""
      }, {
        value: "startDate",
        htmlText: "Date",
        selected: ""
      }]
    }
  }
}