角js查詢未運行

-1

我曾嘗試運行jqgrid使用angularjs，但我沒有得到任何輸出。角js查詢未運行

我不得不使用以下：

HTML

<html ng-app="myApp"> 
    <head> 
     <script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
     <link data-require="[email protected]*" data-semver="4.5.2" rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css" /> 
     <script data-require="[email protected]*" data-semver="4.5.2" src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script> 
     <script data-require="[email protected]*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script> 
     <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/redmond/jquery-ui.css" /> 
     <style type="text/css"></style> 
     <script src="ngtest.js"> 

     </script> 
    </head> 
    <body ng-app="myApp" ng-controller="MyController"> 
     <ng-jq-grid config="config" data="data"></ng-jq-grid> 
    </body> 
</html>

的Javascript

var myApp = angular.module("myApp", ["ui.bootstrap"]); 
     myApp.directive("ngJqGrid", function ($compile) { 
     return { 
     restrict: "E", 
     scope: { 
      config: "=", 
      data: "=" 
     }, 
     link: function (scope, element, attrs) { 
      var $grid; 

      scope.$watch("config", function (newValue) { 

       element.children().empty(); 
       $grid = angular.element("<table id='" + $.jgrid.jqID() + "'></table>"); 
       element.append($compile($grid)(scope)); 

       element.append($grid); 
       angular.extend(newValue, { 
        autoencode: true, 
        iconSet: "fontAwesome", 
        cmTemplate: { autoResizable: true }, 
        autoResizing: { compact: true }, 
        autoresizeOnLoad: true, 
        loadComplete: function() { 
         $compile(this)(scope); 
        } 
       }); 

       angular.element($grid) 
        .jqGrid(newValue) 
        .jqGrid("navGrid") 
        .jqGrid("filterToolbar"); 
      }); 
      scope.$watch("data", function (newValue, oldValue) { 
       $grid.jqGrid("clearGridData"); 
       $grid.jqGrid("setGridParam", {data: newValue}); 
       $grid.trigger("reloadGrid"); 
      }); 
     } 
    }; 
}); 

myApp.controller("MyController", function ($scope) { 
    $scope.config = { 
     myClick: function (rowid) { 
      alert("Test buton is clicked on rowid=" + rowid); 
     }, 
     colNames: ["Client", "", "Date", "Closed", "Shipped via", "Amount", "Tax", "Total", "Notes"], 
     colModel: [ 
      { name: "name", align: "center", width: 65, editrules: {required: true}, 
       searchoptions: { sopt: ["tcn", "tnc", "teq", "tne", "tbw", "tbn", "tew", "ten"] }}, 
      { name: "myLink", align: "center", 
       formatter: function (cellvalue, options, rowObject) { 
        return "<button class='btn btn-primary' popover-placement='top' popover='" + 
         rowObject.note + "' ng-click='config.myClick(" + options.rowId + ")'>Test</button>"; 
       }}, 
      { name: "invdate", width: 125, align: "center", sorttype: "date", 
       formatter: "date", formatoptions: { newformat: "d-M-Y" }, 
       editoptions: { dataInit: initDateEdit }, 
       searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } }, 
      { name: "closed", width: 70, template: "booleanCheckboxFa" }, 
      { name: "ship_via", width: 105, align: "center", formatter: "select", 
       edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" }, 
       stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } }, 
      { name: "amount", width: 75, template: "number" }, 
      { name: "tax", width: 52, template: "number", hidden: true }, 
      { name: "total", width: 60, template: "number" }, 
      { name: "note", width: 60, sortable: false, edittype: "textarea" } 
     ] 
    }; 
    $scope.data = [ 
     { id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: 0, tax: 0, closed: true, ship_via: "TN", total: 0 }, 
     { id: "21", invdate: "2007-10-02", name: "test2", note: "note2", amount: 351.75, tax: 23.45, closed: false, ship_via: "FE", total: 375.2 }, 
     ....etc 
    ]; 
});

Fiddle

來源

2015-11-02 Dhana Raja

你有很多的事情s正在進行：

當您使用jsfiddle時，您需要在左側面板上加載外部資源。
當使用jsfiddle你不包括header它會自動包含在輸出
你不包括你作爲一個依賴的angular-ui-bootstrap javascript文件
您使用的是舊版本的角度做哪些不與角UI的引導配對，我更新的角度依賴性以1.3.20得到的東西運行
使用的jsfiddle具有角您需要選擇從左側的選項No wrap - in <body>，否則將無法運行角。
您正在嘗試應用到DOM綁定兩次，你只需要一個ng-app="myApp"
你有你的通話，例如initDateEdit和initDateSearch哪些未被定義

之所以這麼說的功能，進行這些更改的應用程序將在jsfiddle中加載。

Working Fiddle

來源

2015-11-02 15:49:18 Malkus

我有輸出的jsfiddle，但我想在編輯器要做到這一點，並保存爲HTML文件我沒有得到輸出FRND :(請幫助我，我得還提供未顯示的值jqgrid爲什麼？ –

角js查詢未運行

回答

相關問題