Question

如何将属性设置为动态添加按钮？我已经尝试但如果我更改li:before{ content: counters(item, ".") ". "; counter-increment: item; } ol ol li:before{ content: counters(item, ".") " "; }所有按钮类型也绑定在一起。我想将attr设置为第一个添加按钮，将{type:Submit}设置为第二个按钮，将{type:Reset}设置为第三个按钮。如何将不同的{type:Cancel}值设置为3个不同的按钮？

Working DEMO

attr

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);
    });
};

Answer 1

您的部分问题是您正在创建所有具有相同ID的元素。

来自MDN：

Element.id属性表示元素的标识符，反映了id全局属性。

在文档中必须是唯一的，并且通常用于使用getElementById检索元素。 id的其他常见用法包括在使用CSS设置文档样式时使用元素的ID作为选择器。

- Mozilla Developer Network -- Web API -- Element.id

因此，在您的代码中使用唯一 id属性创建html。

var buttonId = 0;
function buttonhtml() {
    buttonId++;
    return '<div ng-click="selectButton(' +buttonId+ ')">' +
           '<button id="button-' +buttonId+ '">' +
           'Button #' +buttonId+ 
           '</button></div>';
};
var button = $compile(buttonhtml())($scope);

通过执行此操作，您将创建符合条件的HTML，并且您将能够使用getElementById更改特定按钮属性。

Answer 2

我对此做了很多研究，这是我提出的解决方案。我认为这将是有用的，完全符合你的情况。相反，如果你应该尝试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>

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

2 个答案: