JSFiddle - React, Tailwind, and code Playground

by Sagar Samrat De

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.8.0/css/xeditable.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.8.0/js/xeditable.min.js"></script>
<div ng-app="app" ng-controller="Ctrl" style="padding:10px">
  <h2>Value as numeric</h2>
  Comment: Everything is as expected<br />
  <a href="#" editable-radiolist="user.status_n" e-ng-options="s.value as s.text for s in ::statuses_n track by s.value">
    {{ showStatus_n() }}
  </a>
  
  <h2>Value as text</h2>
  Comment: In edit mode missing selection<br />
  <a href="#" editable-radiolist="user.status_t" e-ng-options="s.value as s.text for s in ::statuses_t track by s.value">
    {{ showStatus_t() }}
  </a>
  
  <h2>Value as text with space</h2>
  Comment: Throwing error<br />
  <a href="#" editable-radiolist="user.status_ts" e-ng-options="s.value as s.text for s in ::statuses_ts track by s.value">
    {{ showStatus_ts() }}
  </a>
</div>

JavaScript

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

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

app.controller('Ctrl', function($scope, $filter) {
  $scope.user = {
  	status_n: 2,
    status_t: 'F',
    status_ts: 'G BBB'
  };
  
  $scope.statuses_n = [
    {value: 1, text: 'Male'},
    {value: 2, text: 'Female'}
  ]; 
  $scope.statuses_t = [
    {value: 'M', text: 'Male'},
    {value: 'F', text: 'Female'}
  ]; 
  $scope.statuses_ts = [
    {value: 'G AAA', text: 'Gender 1'},
    {value: 'G BBB', text: 'Gender 2'}
  ]; 
  
  $scope.showStatus_n = function() {
    var selected = $filter('filter')($scope.statuses_n, {value: $scope.user.status_n});
    return ($scope.user.status_n && selected.length) ? selected[0].text : 'Not set';
  };
  $scope.showStatus_t = function() {
    var selected = $filter('filter')($scope.statuses_t, {value: $scope.user.status_t});
    return ($scope.user.status_t && selected.length) ? selected[0].text : 'Not set';
  };
  $scope.showStatus_ts = function() {
    var selected = $filter('filter')($scope.statuses_ts, {value: $scope.user.status_ts});
    return ($scope.user.status_ts && selected.length) ? selected[0].text : 'Not set';
  };
});