Question

我正在尝试调整如何使用智能表自定义插件的示例。请参阅＆＃34;创建您自己的插件＆＃34; http://lorenzofox3.github.io/smart-table-website/

的部分

以下是我的网络应用程序到目前为止的屏幕截图：

我遇到的问题是我不知道如何从智能表中选择项目。智能桌上的所选项目是＆＃34;啤酒＆＃34;和＃34;山地自行车＆＃34;。这是我的app.js文件：

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

这是我的控制器：

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

更新：这里是相关的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>

当我单击添加按钮时，我的submit_vendor（）函数会执行，但我传递给表单数据的vendor_types为空。如何将表格中选中的项目输入表格数据？

谢谢！

Answer 1

我找到了https://github.com/vitalets/checklist-model 这使事情变得容易多了。我不需要声明我的csSelect指令：）

如何从智能表插件中获取数据？

1 个答案: