Question

我想使用检查清单并向用户显示她检查的方框。

我正在使用这个框架：http://vitalets.github.io/angular-xeditable/#checklist。看他的例子＆＃39;清单＆＃39;与他的例子相比，选择多个＆＃39;。但是，我不想显示带逗号分隔字符串的链接，即join（＆＃39;，＆＃39;）。我希望每个选项都显示在前一个选项下面，有序列表或类似内容中。

从他的例子中复制了很多，这是我的控制器的胆量：

    $scope.userFeeds = {
        feeds: {}
    };

    $scope.feedSource = [
      { id: 1, value: 'All MD' },
      { id: 2, value: 'All DE' },
      { id: 3, value: 'All DC' }
    ];

    $scope.updateFeed = function (feedSource, option) {
        $scope.userFeeds.feeds = [];
        angular.forEach(option, function (v) {

            var feedObj = $filter('filter')($scope.feedSource, { id: v });
            $scope.userFeeds.feeds.push(feedObj[0]);
        });
        return $scope.userFeeds.feeds.length ? '' : 'Not set';
    };

这是我的HTML：

    <div ng-show="eventsForm.$visible"><h4>Select one or more feeds</h4>
        <span editable-select="feedSource" 
            e-multiple 
            e-ng-options="feed.id as feed.value for feed in feedSource" 
            onbeforesave="updateFeed(feedSource, $data)">
        </span>
    </div>

    <div ng-show="!eventsForm.$visible"><h4>Selected Source Feed(s)</h4>
    <ul>
        <li ng-repeat="feed in userFeeds.feeds">
            {{ feed.value || 'empty'  }}
        </li> 
        <div ng-hide="userFeeds.feeds.length">No items found</div>
    </ul>
    </div>

我的问题是 - 显示可以使用editable-select和e-multiple，但不能使用editable-checklist。交换掉它，什么也没有。

要解决这个问题，我已经尝试了动态html，就像在这里With ng-bind-html-unsafe removed, how do I inject HTML?一样，但我在让页面对更改的范围作出反应时遇到了相当大的困难。

我的目标是允许用户从核对表中进行选择，然后显示选中的项目。

Answer 1

试试这个小提琴：http://jsfiddle.net/mr0rotnv/15/

你的onbeforesave需要返回false而不是空字符串，以阻止与xEditable的模型更新冲突。（示例有onbeforesave和模型绑定处理同一个变量）

return $scope.userFeeds.feeds.length ? false : 'Not set';

如果您需要以编辑模式启动，请将属性shown="true"添加到周围的表单元素。

完整性代码：

控制器：

$scope.userFeeds = {
    feeds: []
};

$scope.feedSource = [
    { id: 1, value: 'All MD' },
    { id: 2, value: 'All DE' },
    { id: 3, value: 'All DC' }
];


$scope.updateFeed = function (feedSource, option) {
    $scope.userFeeds.feeds = [];
    angular.forEach(option, function (v) {
        var feedObj = $filter('filter')($scope.feedSource, { id: v });
        if (feedObj.length) { // stop nulls being added.
            $scope.userFeeds.feeds.push(feedObj[0]);
        }
    });
    return $scope.userFeeds.feeds.length ? false : 'Not set';
};

HTML：

<div ng-show="editableForm.$visible">
    <h4>Select one or more feeds</h4>
    <span editable-checklist="feedSource"
          e-ng-options="feed.id as feed.value for feed in feedSource"
          onbeforesave="updateFeed(feedSource, $data)">
    </span>
</div>
<div ng-show="!editableForm.$visible">
    <h4>Selected Source Feed(s)</h4>
    <ul>
        <li ng-repeat="feed in userFeeds.feeds">{{ feed.value || 'empty' }}</li>
        <div ng-hide="userFeeds.feeds.length">No items found</div>
    </ul>
</div>

的CSS：

（用于为“编辑视图”提供列表外观） .editable-input label {display:block;}

如果您不需要进行任何验证或以编辑模式启动，也可以选择使用过滤器。

控制器：

$scope.user = { status: [2, 3] };

$scope.statuses = [
    { value: 1, text: 'status1' },
    { value: 2, text: 'status2' },
    { value: 3, text: 'status3' }
];

$scope.filterStatus = function (obj) {
    return $scope.user.status.indexOf(obj.value) > -1;
};

HTML：

<a href="#" editable-checklist="user.status" e-ng-options="s.value as s.text for s in statuses">
    <ol>
        <li ng-repeat="s in statuses | filter: filterStatus">{{ s.text }}</li>
    </ol>
</a>

Angular-xeditable：需要一个显示已检查项目的清单

1 个答案:

控制器：

HTML：

的CSS：

控制器：

HTML：