Question

我正在尝试将select唯一ID分配给单选按钮。我不确定这是正确的方法。我试过这样：

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

  <head>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    <script>
    angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.startDate = {
        id: new Date()
      };
      $scope.specialValue = {
        "value": new Date().getMilliseconds()
      };

      $scope.uniqueId = new Date().getMilliseconds();

    }]);
    </script>
    <form ng-controller="ExampleController" name="myForm">
      <label>
        <input type="radio" name="rdboption" ng-value="specialValue" ng-model="startDate.id" id="{{::uniqueId}}"  />

    Jan
  </label>
      <br />
      <label>
        <input type="radio" name="rdboption" ng-value="specialValue" ng-model="startDate.id" id="{{::uniqueId}}" />

    Feb
  </label>
      <br />
      <label>
        <input type="radio" name="rdboption" ng-value="specialValue" ng-model="startDate.id" id="{{::uniqueId}}" />

    Mar
  </label>
      <br />
      <tt>ID = {{uniqueId | json}}</tt>
      <br />
    </form>

 Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.


  </body>

</html>

即使在以毫秒为单位添加时间戳之后，也会为所有单选按钮打印相同的值

Answer 1

它添加了相同的值，因为它是相同的值，您只使用一个变量，在控制器上分配一次，然后使用相同的变量三次。

无论如何，为什么需要为每个输入分配唯一的ID。

你可以解决它，在控制器上对一个函数进行decalring，返回唯一的id，并从你的视图中调用它。

Answer 2

您可以在范围内创建一个函数，如下所示：

JSFiddle Demo

<强> HTML：

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

  <head>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link href="style.css" rel="stylesheet" />
    <script src="script.js"></script>
  </head>

  <body>
    <script>
      angular.module('radioExample', [])
        .controller('ExampleController', ['$scope', function($scope) {

          $scope.startDate = {
            id: new Date()
          };
          $scope.specialValue = {
            "value": new Date().getMilliseconds()
          };

          $scope.getUId = function() {
           var charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
           var charSetSize = charSet.length;
            var id = '';
            for (var i = 1; i <= 4; i++) {
              var randPos = Math.floor(Math.random() * charSetSize);
              id += charSet[randPos];
            }
            return id;
          }

        }]);

    </script>
    <form ng-controller="ExampleController" name="myForm">
      <label>
        <input type="radio" name="rdboption" ng-value="specialValue" ng-model="startDate.id" id="{{::getUId()}}" /> Jan
      </label>
      <br />
      <label>
        <input type="radio" name="rdboption" ng-value="specialValue" ng-model="startDate.id" id="{{::getUId()}}" /> Feb
      </label>

      <br />
      <label>
        <input type="radio" name="rdboption" ng-value="specialValue" ng-model="startDate.id" id="{{::getUId()}}" /> Mar
      </label>
      <br />
    </form>

  </body>

</html>

修改：您可以更改charSet以适合您在唯一ID中的可接受字符的域名。

Answer 3

解决方案：

html：

<input type="radio" name="rdboption" ng-value="specialValue" ng-model="startDate.id" id="{{uniqueId()}}" />

<强> JS：

angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.startDate = {
        id: new Date()
      };
      $scope.specialValue = {
        "value": new Date().getMilliseconds()
      };

      $scope.uniqueId = function() {
        return new Date().getMilliseconds();
      };

    }]);

在选择时为单选按钮分配唯一ID

3 个答案: