JSFiddle - React, Tailwind, and code Playground

by ckosloski

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<h4>Angular-xeditable demo</h4>
<div ng-app="app" ng-controller="Ctrl" style="margin: 50px">
  Brand: 
  <a href="#" buttons="no" editable-select="car.brand" e-ng-options="s.value as s.text for s in brands" e-ng-change="onBrandChange($data)">
    {{ car.brand }}
  </a>
  <br><br>
  Model: 
  <a href="#" buttons="no" editable-select="car.model" e-ng-options="model for model in modelOption">
  {{ car.model }}
  </a>
  <br><br>
 car {{ car | json }}
 <br><br>
 brands {{brands| json }}
 <br><br>
 models{{models| json }}
</div>

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(function(editableOptions) {
  editableOptions.theme = 'bs3';
});

app.controller('Ctrl', function($scope, $filter) {
	
  $scope.car = {
    brand: 'Ford',
    model: 'havent selected'
    
  };

    
  $scope.brands = [
    {value: 'Ford', text: 'Ford'},
    {value: 'Toyota', text: 'Toyota'},
    {value: 'Nissan', text: 'Nissan'},
  ]; 
  
  $scope.models = {
  									Ford : ['Focus','Fiesta'],
                    Toyota : ['Camry'],
                    Nissan : ['Siesta','Sentra']
  								};
                  
  $scope.onBrandChange = function(self){
  		
  		$scope.modelOption = $scope.models[self];
  
  	}
     
    
  
                  
  
});