Angular-xeditable: Need a checklist that displays checked items

Question

I would like to use a check list and show the user the boxes she has checked.

I am using this framework: http://vitalets.github.io/angular-xeditable/#checklist . See his example 'Checklist' versus his example 'Select multiple'. However, I do not want to display a link with a comma separated string, i.e., join(', '). I would like each selection to appear beneath the previous, in an ordered list or similar.

Pretty much copied from his examples, here are the guts of my controller:

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

And here is my 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>

My problem is - display works with editable-select and e-multiple, but not with editable-checklist. Swap it out and nothing is returned.

To workaround, I have tried dynamic html as in here With ng-bind-html-unsafe removed, how do I inject HTML? but I have considerable difficulties getting the page to react to a changed scope.

My goal is to allow a user to select from a checklist and then to display the checked items.

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Try this fiddle: http://jsfiddle.net/mr0rotnv/15/

Your onbeforesave will need to return false, instead of empty string, to stop conflict with the model update from xEditable. (Example has onbeforesave and model binding working on the same variable)

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

If you require to start in edit mode add the attribute shown="true" to the surrounding form element.

Code for completeness:

Controller:

$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:

(Used to give the "edit view" a list appearance) .editable-input label {display:block;}

Also there is the option of using a filter if you do not need to do any validation or start in edit mode.

Controller:

$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>

your fiddle shows a solution to my problem, but one that does not work in my project. i copied from your checklist example, but i still see no items found. i'm using angular-xeditable - 0.1.8 and AngularJS v1.2.17. the part i think is strangest is that the $data argument as seen in the option parameter (while debugging) shows the entire feedSource array. therefore the filter doesn't do a thing. i was expecting a single digit, as made obvious by id: v. thank you for any other pointers. — jacoblambert, Dec 12 '14 at 16:07
did you know there is a separate dependency required to use the checklist? i see now you used it in your fiddle. i did not have this dependency, nor do i remember seeing that it was required. (checklist-model.js) thanks. — jacoblambert, Dec 12 '14 at 19:42
@jacoblam I originally forked the fiddle from the checklist example in the docs - so had it be default. Did the extra dependancy fix the issue? — user3225349, Dec 12 '14 at 20:06
not yet. i added the dependency to my module but there has been no change. angular.module('productControllers', ['documentTabs', 'xeditable', 'checklist-model' ]). i define a controller off that module in a different file, like so: angular.module('productControllers') .controller('participantEventsCtrl', function ($scope, $filter, $http) . xeditable is working, and the options are displayed as a checklist. however, the option parameter is always supplied an argument with every element in the feedSource array (as if i had checked every box). — jacoblambert, Dec 24 '14 at 15:57
i think the question has become: what argument can i use to send back to the controller function only the checked values in the checklist? $data is not doing it. — jacoblambert, Dec 24 '14 at 16:37
i had a form cancel in the ng-click of the submit form. still baffled why this didn't allow checklist to work but did allow multiple select. thanks for your original great answer! — jacoblambert, Dec 29 '14 at 00:32

Angular-xeditable: Need a checklist that displays checked items

1 Answers1

Controller:

Html:

Css:

Controller:

HTML: