Error: Angular-xeditable radiolist for textual value

Question

I am working with angular-xeditable radiolist. However, my code is not working properly when list values are non numetic. I found -

If the values are textual and do not contain space, in edit mode the default radio button is not selected. After saving the model value becomes null.
If the values are textual and contain space, edit mode throws an error.

I have used JQuery 3.2.1, bootstrap 3.3.7, angular 1.6.1, angular-xeditable 0.8.0.

In the below code, I have been presented a simple example with 3 cases. Please help me to resolve the issue.

HTML

<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';
 };

});

jsfiddle link: https://jsfiddle.net/sagarsde/713m56dd/27/

Error: Angular-xeditable radiolist for textual value

0 Answers0