3

我正在使用angular-xeditable radiolist。但是，当列表值不是数值时，我的代码无法正常工作。我发现 -

  1. 如果值是文本值且不包含空格，则在编辑模式下不选择默认单选按钮。保存后模型值变为空。
  2. 如果值是文本值并且包含空格，则编辑模式会引发错误。

我使用过 JQuery 3.2.1、bootstrap 3.3.7、angular 1.6.1、angular-xeditable 0.8.0。

在下面的代码中，我看到了一个包含 3 个案例的简单示例。请帮我解决问题。

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 链接：https ://jsfiddle.net/sagarsde/713m56dd/27/

4

0 回答 0