个人中心
gpt4 book ai didi

javascript - 为动态元素设置不同的属性

转载 作者：行者123 更新时间：2023-11-30 16:20:05 25 4
gpt4 key购买 nike

如何为动态添加的按钮设置属性？我试过了，但如果我更改 attr，所有按钮类型也会绑定(bind)在一起。我想将 {type:Submit} 设置为第一个添加的按钮，将 {type:Reset} 设置为第二个按钮，并将 {type:Cancel}到第三个按钮。如何为 3 个不同的按钮设置不同的 attr 值？

Working DEMO 

var app = angular.module('myapp', ['ngSanitize']);

app.controller('AddCtrl', function($scope, $compile) {

  $scope.add_Button = function(index) {
        var buttonhtml = '<div ng-click="selectButton()"><button id="button_Type">Button</button>//click//</div>';
        var button = $compile(buttonhtml)($scope);
        angular.element(document.getElementById('add')).append(button);
        
            $scope.changeTosubmit = function () {
            var els = document.body.querySelectorAll('#button_Type');
            for (var i = 0, ils = els.length; i < ils; i++) {
                var el = els[i];
                el.setAttribute("type", "submit");
                compile(el);
            }
        };
        $scope.changeToreset = function () {
            var els = document.body.querySelectorAll('#button_Type');
            for (var i = 0, ils = els.length; i < ils; i++) {
                var el = els[i];
                el.setAttribute("type", "reset");
                compile(el);
            }
        };
        $scope.changeTocancel = function () {
            var els = document.body.querySelectorAll('#button_Type');
            for (var i = 0, ils = els.length; i < ils; i++) {
                var el = els[i];
                el.setAttribute("type", "cancel");
                compile(el);
            }
        };
};

    $scope.selectButton = function () {
$scope.showButton_Types = true;
    };
  
});
function compile(element) {
    var el = angular.element(element);
    $scope = el.scope();
    $injector = el.injector();
    $injector.invoke(function ($compile) {
        $compile(el)($scope);
    });
};
<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="https://code.angularjs.org/1.5.0-rc.0/angular-sanitize.min.js"></script>

  </head>

  <body ng-controller="AddCtrl">
    <button ng-click="add_Button($index)">Add Buttons</button>
<hr>
	<div id="add"></div>
	<form ng-show="showButton_Types">
      <div>            
        <label>change button types(?)</label><br/>
        <input ng-click="changeTosubmit()" name="submit" type="radio">&nbsp;Submit
        <input ng-click="changeToreset()" name="submit" type="radio">&nbsp;Reset
        <input ng-click="changeTocancel()" name="submit" type="radio">&nbsp;Cancel
      </div>
	</form>
  </body>

</html>

最佳答案

我对此做了很多研究，这是我想出的解决方案。我认为这将很有用并且完全符合您的情况。相反，否则你应该尝试如下所示的 AngularJs 指令。引用访问

https://github.com/yearofmoo/angular-forms-refactor

要了解指令及其作用域的工作原理，请访问示例进行完美解释

https://docs.angularjs.org/guide/compiler 

angular.module('FieldEditor', [])

.controller("FieldEditorPageController",
    function() {

      var self = this;
      this.fields = [{
        type: 'submit'
      }];

      this.inputTypes = [{
        value: "reset",
        title: "button[reset]"
      }, {
        value: "cancel",
        title: "button[cancel]"
      }, {
        value: "submit",
        title: "button[submit]"
      }];

      this.newField = function() {
        self.fields.push({
          type: 'submit'
        });
      };

      this.removeField = function(field) {
        var index = self.fields.indexOf(field);
        if (index >= 0) {
          self.fields.splice(index, 1);
        }
      };
    })
  .controller("appButtonController", ['$scope', '$attrs',
    function($scope, $attrs) {
      var self = this;
      var directiveScope = $scope.$parent;
      this.options = directiveScope.$eval($attrs.model);
      this.onOk = function() {
        alert(self.options.type + ' button clicked');
      }
    }
  ])
  .directive('appButton', function($compile) {
    return {
      transclude: true,
      template: '<button ng-click="buttonCtrl.onOk()" type="">{{type|uppercase}}</button>',
      scope: {
        title: '@',
        type: '@'
      },
      restrict: 'E',
      replace: true,
      controller: 'appButtonController',
      controllerAs: 'buttonCtrl',
    }
  })

angular.module("MyApp", ['FieldEditor']);
<!doctype html>
<html>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="js/controller.js"></script>

<head>
  <meta charset="utf-8" />

  <title>
    Dynamic Fields and Directive Binding
  </title>
</head>

<body>
  <div ng-app="MyApp">
    <h1>Dynamic Fields and Directive Binding</h1>
    <div ng-controller="FieldEditorPageController as pageCtrl">

      <div>
        <div ng-repeat="field in pageCtrl.fields track by $index">
          <div>
            <div>
              {{ $index + 1 }}.
            </div>
            <div>
              <div>
                <label>Button Type:</label>
                <select ng-model="field.type" ng-options="entry.value as entry.title for entry in pageCtrl.inputTypes" name="field_type" required>
                </select>
                <app-button type="{{field.type}}" text="button" model="field">
                </app-button>
              </div>
              <div>
                <a href="" ng-click="pageCtrl.removeField(field)">Remove</a>
              </div>
            </div>
          </div>
        </div>
        <div>
          <span>
                        <a href="" ng-click="pageCtrl.newField()">
                        Add Button
                        </a>
                    </span>
        </div>
      </div>

    </div>
  </div>
</body>

</html>

关于javascript - 为动态元素设置不同的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34872280/

25 4 0
文章推荐： javascript - Jquery - 如何在 html 元素之间来回转换 (fadeIn/fadeOut) 并保持位置？
文章推荐： c - 不相交动态内存释放分配内存问题
文章推荐： c# - Kinect:计算头部的俯仰角、偏航角、滚动角
文章推荐： c - 在 'main' 之外执行 void 后如何返回到 'main' 的顶部
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com