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

assign unique id to radio button on selection

本文关键字：分配 唯一 id 单选按钮 选择      更新时间：2023-09-26

我试图在选择上分配唯一的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>

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

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

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

你可以解决这个问题，在你的控制器上声明一个返回唯一id的函数，并从你的视图调用它。

你可以像这样在你的作用域中创建一个函数:

JSFiddle演示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>

edit:您可以更改charSet以适合您的唯一id中可接受字符的域。

解决方案:

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();
      };
    }]);
相关文章：