如何使用angularJs绑定表格上的guid重复

时间:2017-02-06 04:40:04

标签: html angularjs

使用以下代码生成Guid

  //sal urn
    $scope.getGUIDSal = function () {
        var d = new Date().getTime();
        var uuid = 'xxxx-xxxx-4xxx-yxxx-xxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    }

    $scope.URN = $scope.getGUIDSal();

这是我的表格,如果创建了多行,我想为每一行创建新的guid,

<table >
                        <thead>
                            <tr>
                                <th>SNo</th>
                                <th>URN</th>

                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="sal in SalaryDetails">
                                <td class="label-center">
                                    {{$index + 1}}

                                </td>
                                <td>
                                    {{URN}}
                                </td>

                                <td>
                                    {{sal.Amount}}
                                </td>
                            </tr>
                        </tbody>
                    </table>

通过使用上面的代码,每行绑定相同的guid

4 个答案:

答案 0 :(得分:0)

你只需稍微调整一下代码

$scope.getGUIDSal = function () {
        var d = new Date().getTime();
        var uuid = 'xxxx-xxxx-4xxx-yxxx-xxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
       return uuid;
}

//$scope.URN = $scope.getGUIDSal(); //remove this

在内部视图中,您可以执行此操作

 <td>
    {{getGUIDSal()}}
 </td>

如果这不起作用,您可以在getGUIDSal ()内初始化一个新的范围变量,并在视图中使用它。

而不是return uuid;

你可以这样做:

$scope.URN = uuid;

在视图中使用$scope.URN

答案 1 :(得分:0)

您可以将薪水的ID传递给函数并生成guiid并返回视图。

<强> HTML

<tr ng-repeat="sal in SalaryDetails">
 <td class="label-center">
  {{$index + 1}}
 </td>
 <td>
  {{getGUIDSal(passid)}}
 </td>
 <td>
   {{sal.Amount}}
 </td>
 </tr>

<强>控制器

$scope.getGUIDSal = function (someid) {
        var d = new Date().getTime();
        var uuid = 'xxxx-xxxx-4xxx-yxxx-xxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid;
    }

答案 2 :(得分:0)

你可以这样做:

<td>
{{ getGUIDSal() }}
</td>

答案 3 :(得分:0)

使用指令(Run code snippet)的另一种方法:

(function() {
  var app = angular.module("app", []);

  function HomeController() {
    var vm = this;
    vm.salaryDetails = [{
      amount: "$1500"
    }, {
      amount: "$2000"
    }, {
      amount: "$5100"
    }];
  }
  app.controller("HomeController", [HomeController]);

  function urn() {
    return {
      restrict: "A",
      link: function(scope, element, attrs) {
        var d = new Date().getTime();
        var uuid = 'xxxx-xxxx-4xxx-yxxx-xxx'.replace(/[xy]/g, function(c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        element.html(uuid);
        //In case you want to add as attribute of td
        element.attr("urn",uuid);
      }
    }
  }
  app.directive("urn", [urn]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div class="container" ng-controller="HomeController as homeCtrl">

    <table>
      <thead>
        <tr>
          <th>SNo</th>
          <th>URN</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="sal in homeCtrl.salaryDetails">
          <td class="label-center">{{$index + 1}}</td>
          <td urn></td>
          <td>&nbsp;&nbsp;{{sal.amount}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>