AngularJS智能表过滤外部控制 [英] AngularJS Smart Table Filtering By External Control

查看：126
本文介绍了AngularJS智能表过滤外部控制的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想弄清楚由生活在表本身之外的控制纳入ST-表，ST-安全-SRC和过滤数据的正确方法。用户可以添加，编辑和删除数据，所以这就是为什么我使用的安全来源。

任何实例或反馈将是巨大的！


解决方案

结帐这个例子中，其中包含选项添加，编辑，删除行从智能表。

http://plnkr.co/edit/DtD4xC

\r
\r

angular.module（'对myApp'，['智能表']）\r
  .controller（'mainCtrl'，['$范围'，\r
    功能（$范围）{\r
      $ scope.rowCollection = [{\r
        ID：100，\r
        姓：洛朗，\r
        名字：雷纳，\r
        生日：新的日期（1987年5月21日），\r
        平衡：102，\r
        电子邮件：whatever@gmail.com\r
      }，{\r
        ID：101，\r
        姓：Blandine'，\r
        名字：Faivre，\r
        生日：新的日期（1987年4月25日），\r
        平衡：-2323.22，\r
        电子邮件：oufblandou@gmail.com\r
      }，{\r
        ID：102，\r
        姓：弗朗索瓦丝'，\r
        名字：'弗里尔'，\r
        生日：新的日期（1955年8月27日），\r
        余额：42343，\r
        电子邮件：raymondef@gmail.com\r
      }];\r
      变种的id = 1;\r
      $ scope.edit = FALSE;\r
      $ scope.addRandomItem =功能addRandomItem（）{\r
        $ scope.editrow = {ID：++ ID};\r
        $ scope.edit = TRUE;\r
      };\r
\r
      $ scope.removeItem =功能的removeItem（行）{\r
        VAR指数= $ scope.rowCollection.indexOf（行）;\r
        如果（指数！== -1）{\r
          $ scope.rowCollection.splice（指数，1）;\r
        }\r
      }\r
\r
      $ scope.editItem =功能editItem（行）{\r
        $ scope.editrow = angular.copy（行）;\r
        $ scope.edit = TRUE;\r
      }\r
\r
      $ scope.saveItem =功能saveItem（editrow）{\r
        VAR指标;\r
        VAR itemStatus = FALSE;\r
\r
        对于（指数= 0;指数 - LT; $ scope.rowCollection.length;指数++）{\r
          如果（$ scope.rowCollection [指数] .ID === editrow.id）{\r
            itemStatus =真;\r
            打破;\r
          }\r
        }\r
        如果（itemStatus）{\r
          的console.log（更换项目：+ editrow.id）;\r
          $ scope.rowCollection.splice（指数，1，editrow）;\r
          $ scope.editrow = {ID：++ ID};\r
        }\r
        其他{\r
          的console.log（添加项目+ editrow.id）;\r
          $ scope.rowCollection.push（editrow）;\r
          $ scope.editrow = {ID：++ ID};\r
        }\r
        $ scope.edit = FALSE;\r
      }\r
\r
    }\r
  ]）;

\r

\r
\r

\r
\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=对myApp＆GT;\r
\r
  ＆LT; HEAD＆GT;\r
    ＆LT;链路数据需要=bootstrap-css@3.2.0数据semver =3.2.0的rel =stylesheet属性HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap .min.css/＆GT;\r
    ＆所述;脚本数据需要=angular.js@1.2.21数据semver =1.2.21SRC =的https：//$c$c.angularjs.org/1.2.21/angular.js＆GT ;＆LT; / SCRIPT＆GT;\r
    ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;\r
    ＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;\r
    ＆LT;脚本SRC =智能table.debug.js＆GT;＆LT; / SCRIPT＆GT;\r
    ＆所述; SCRIPT SRC =lrInfiniteScrollPlugin.js＆GT;＆下; /脚本＆GT;\r
  ＆LT; /头＆GT;\r
\r
  ＆LT;机身NG控制器=mainCtrl＆GT;\r
    ＆LT; H3＆GT;基本智能表入门＆LT; / H3 GT＆;\r
    ＆LT;按钮式=按钮NG点击=addRandomItem（）级=BTN BTN-SM BTN-成功＆GT;\r
＆LT; I类=glyphicon glyphicon加＆GT;\r
＆LT; I＆GT /;添加随机项\r
＆LT; /按钮＆GT;\r
＆LT;表NG-秀=编辑＆GT;\r
＆LT;＆TBODY GT;\r
＆所述; TR＆GT;\r
百分位＆gt;首先名和LT; /第i\r
＆LT;第i个姓氏＆LT; /第i\r
＆LT;第i个出生日期和LT; /第i\r
＆LT;第i余量＆lt; /第i\r
＆LT;第i个电子邮件＆LT; /第i\r
＆LT;第i个动作＆LT; /第i\r
      ＆LT; / TR＆GT;\r
      ＆所述; TR＆GT;\r
＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.firstName类型=文本级=表格控\r
占位=请输入名字/＆GT;＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.lastName类型=文本级=表格控\r
占位=输入姓氏/＆GT;＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.birthDate类型=文本级=表格控\r
占位=输入84。新生日期/＆GT;＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.balance类型=文本级=表格控\r
占位=输入平衡/＆GT;＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT;输入数据-NG-模式=editrow.email类型=文本级=表格控\r
占位=输入电子邮件/＆GT;＆LT; / TD＆GT;\r
＆LT; TD＆GT;＆LT;按钮式=按钮NG点击=saveItem（editrow）级=BTN BTN-SM BTN-成功＆GT;保存＆LT; /按钮＆GT;＆LT; / TD＆GT;\r
      ＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
＆LT; /表＆gt;\r
    ＆LT;表ST表=rowCollection级=表的表条纹＆GT;\r
＆LT;＆THEAD GT;\r
＆所述; TR＆GT;\r
百分位＆gt;首先名和LT; /第i\r
＆LT;第i个姓氏＆LT; /第i\r
＆LT;第i个出生日期和LT; /第i\r
＆LT;第i余量＆lt; /第i\r
＆LT;第i个电子邮件＆LT; /第i\r
百分位＆gt;编辑＆LT; /第i\r
＆LT;第i删除＆LT; /第i\r
      ＆LT; / TR＆GT;\r
    ＆LT; / THEAD＆GT;\r
    ＆LT;＆TBODY GT;\r
      ＆LT; TR NG重复=行rowCollection＆GT;\r
      ＆所述; TD＆GT; {{row.firstName}}＆下; / TD＆GT;\r
        ＆所述; TD＆GT; {{row.lastName}}＆下; / TD＆GT;\r
      ＆所述; TD＆GT; {{row.birthDate |日期：'shortDate'}}＆LT; / TD＆GT;\r
    ＆所述; TD＆GT; {{row.balance}}＆下; / TD＆GT;\r
      ＆所述; TD＆GT; {{row.email}}＆下; / TD＆GT;\r
      ＆所述; TD＆GT;\r
＆LT;按钮式=按钮NG点击=editItem（行）级=BTN BTN-SM BTN-危险＆GT;\r
  ＆LT; I类=glyphicon glyphicon-删除圈＆GT;\r
  ＆LT; I＆GT /;\r
＆LT; /按钮＆GT;\r
      ＆所述; TD＆GT;\r
＆LT;按钮式=按钮NG点击=为removeItem（行）级=BTN BTN-SM BTN-危险＆GT;\r
＆LT; I类=glyphicon glyphicon-删除圈＆GT;\r
＆LT; I＆GT /;\r
＆LT; /按钮＆GT;\r
＆LT; / TD＆GT;\r
       ＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
    ＆LT; /表＆gt;\r
  ＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r
\r

I am trying to figure out the correct way to incorporate st-table, st-safe-src, and filtering of the data by a control that lives outside of the table itself. Users can add, edit, and delete data so this is why i am using the safe source.

any examples or feedback would be great!

解决方案

Checkout this example which contains option to Add, Edit, Delete rows from the Smart-Table.

http://plnkr.co/edit/DtD4xC

angular.module('myApp', ['smart-table'])
  .controller('mainCtrl', ['$scope',
    function($scope) {
      $scope.rowCollection = [{
        id: 100,
        firstName: 'Laurent',
        lastName: 'Renard',
        birthDate: new Date('1987-05-21'),
        balance: 102,
        email: 'whatever@gmail.com'
      }, {
        id: 101,
        firstName: 'Blandine',
        lastName: 'Faivre',
        birthDate: new Date('1987-04-25'),
        balance: -2323.22,
        email: 'oufblandou@gmail.com'
      }, {
        id: 102,
        firstName: 'Francoise',
        lastName: 'Frere',
        birthDate: new Date('1955-08-27'),
        balance: 42343,
        email: 'raymondef@gmail.com'
      }];
      var id = 1;
      $scope.edit = false;
      $scope.addRandomItem = function addRandomItem() {
        $scope.editrow = {id:++id};
        $scope.edit = true;
      };

      $scope.removeItem = function removeItem(row) {
        var index = $scope.rowCollection.indexOf(row);
        if (index !== -1) {
          $scope.rowCollection.splice(index, 1);
        }
      }

      $scope.editItem = function editItem(row) {
        $scope.editrow = angular.copy(row);
        $scope.edit = true;
      }

      $scope.saveItem = function saveItem(editrow) {
        var index;
        var itemStatus=false;

        for (index = 0; index < $scope.rowCollection.length; index++) {
          if ($scope.rowCollection[index].id === editrow.id) {
            itemStatus=true;
            break;
          }
        }
        if (itemStatus) {
          console.log("Replacing item:"+editrow.id);
          $scope.rowCollection.splice(index, 1, editrow);
          $scope.editrow = {id:++id};
        }
        else {
          console.log("Adding item:"+editrow.id);
          $scope.rowCollection.push(editrow);
          $scope.editrow = {id:++id};
        }
        $scope.edit = false;
      }

    }
  ]);

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="smart-table.debug.js"></script>
    <script src="lrInfiniteScrollPlugin.js"></script>
  </head>

  <body ng-controller="mainCtrl">
    <h3>Basic Smart-Table Starter</h3>
    <button type="button" ng-click="addRandomItem()" class="btn btn-sm btn-success">
			<i class="glyphicon glyphicon-plus">
			</i> Add random item
		</button>
		<table ng-show="edit">
		  <tbody>
		    <tr>
		      <th>first name</th>
		      <th>last name</th>
		      <th>birth date</th>
	      	<th>balance</th>
	      	<th>email</th> 
	      	<th>action</th>
      	</tr>
      	<tr>
		      <td><input data-ng-model="editrow.firstName" type="text" class="form-control"
									placeholder="Enter first name" /></td>
		      <td><input data-ng-model="editrow.lastName" type="text" class="form-control"
									placeholder="Enter last name" /></td>
		      <td><input data-ng-model="editrow.birthDate" type="text" class="form-control"
									placeholder="Enter brith date" /></td>
	      	<td><input data-ng-model="editrow.balance" type="text" class="form-control"
									placeholder="Enter balance" /></td>
	      	<td><input data-ng-model="editrow.email" type="text" class="form-control"
									placeholder="Enter email" /></td>
					<td><button type="button" ng-click="saveItem(editrow)" class="btn btn-sm btn-success">Save</button></td>
      	</tr>
		  </tbody>
		</table>
    <table st-table="rowCollection" class="table table-striped">
	    <thead>
	      <tr>
		      <th>first name</th>
		      <th>last name</th>
		      <th>birth date</th>
	      	<th>balance</th>
	      	<th>email</th>
	      	<th>edit</th>
	      	<th>delete</th>
      	</tr>
    	</thead>
    	<tbody>
      	<tr ng-repeat="row in rowCollection">
      		<td>{{row.firstName}}</td>
        	<td>{{row.lastName}}</td>
      		<td>{{row.birthDate | date:'shortDate'}}</td>
    	  	<td>{{row.balance}}</td>
      		<td>{{row.email}}</td>
      			<td>
				  <button type="button" ng-click="editItem(row)" class="btn btn-sm btn-danger">
  					<i class="glyphicon glyphicon-remove-circle">
  					</i>
				  </button>
      		<td>
				  <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
					<i class="glyphicon glyphicon-remove-circle">
					</i>
				</button>
				</td>
       	</tr>
	    </tbody>
    </table>
  </body>

</html>

这篇关于AngularJS智能表过滤外部控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆