How to get data from smart-table plugin? - angularjs

Question

I am trying to adapt the example of how to use a custom plugin with smart-table. See the "Create your own plugin" section of http://lorenzofox3.github.io/smart-table-website/
Here is a screen shot of my web app so far:
The problem I have is that I do not know how to get the items select from the smart-table. The selected items on the smart-table are "Beer" and "Mountain Biking". Here's my app.js file:
var app = angular.module("app", ['smart-table']);
app.directive('csSelect', function () {
return {
require: '^stTable',
template: '<input type="checkbox"/>',
scope: {
row: '=csSelect'
},
link: function (scope, element, attr, ctrl) {
element.bind('change', function (evt) {
scope.$apply(function () {
ctrl.select(scope.row, 'multiple');
});
});
scope.$watch('row.isSelected', function (newValue, oldValue) {
if (newValue === true) {
element.parent().addClass('st-selected');
} else {
element.parent().removeClass('st-selected');
}
});
}
};
});
Here is my controller:
app.controller("vendorCtrl", function($scope,$http) {
$scope.vendor_to_look_for = "";
$scope.newvendor = "";
$scope.newlogo = "";
$scope.vendors_types = [];
$scope.itemsByPage=5;
$http.get("http://192.168.1.115:8080/vendor").then(function(response) {
$scope.all_vendors = response.data;
});
$http.get("http://192.168.1.115:8080/type").then(function(response) {
$scope.all_types = response.data;
});
$scope.submit_vendor = function() {
// alert("add new vendor [" + $scope.newvendor + "]" );
var data = $.param({ vendor_name: $scope.newvendor, vendor_logo: $scope.newlogo, vendors_types: $scope.vendors_types });
$http.post("http://192.168.1.115:8080/vendor/add",
// [{'vendor': $scope.newvendor}],
data,
{headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(response) {
console.log(response);
console.log(response.data);
});
$http.get("http://192.168.1.115:8080/vendor").then(function(response) {
console.log(response);
console.log(response.data);
$scope.all_vendors = response.data;
});
};
});
Update: Here's the pertinent HTML:
<form ng-submit="submit_vendor()">
<table>
<tr><td><label>Vendor name</label></td><td><input type="text" ng-model="newvendor" placeholder="Name"></td></tr>
<tr><td><label>Logourl</label></td><td><input type="text" ng-model="newlogo" placeholder="Url"></td></tr>
</table>
<table st-table="displayedCollection" st-safe-src="all_types" class="table table-striped">
<thead>
<tr>
<th st-sort="type">Select</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in displayedCollection">
<td cs-select="x"></td>
<td>{{x.type}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
<button type="submit" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-flash"></span> Add </button>
</form>
When I click the add button my submit_vendor() function executes but my the vendor_types I pass in my form data is empty. How do I get the items selected in my table into my form data?
Thanks!

Answer 1

I found this https://github.com/vitalets/checklist-model
This makes things a lot easier. I do not need to declare my csSelect directive :)