在angularjs中构造一个动态表单

时间:2015-01-14 09:10:13

标签: javascript angularjs

我希望用户从选择字段中选择一个数字。根据我想要构建的数字按钮和文本字段。我将html存储在变量中并根据选择结果进行修改,但angular将其呈现为文本而不是表单元素。

app.js

var myApp = angular.module('myApp',[]);

myApp.controller("myCtrl", function($scope){
    this.players=[];
    this.playerForm = "choose no. of players";
    this.num = 0;
    this.change = function(){
        this.playerForm = "";
        for (var i= 1; i<= this.num; i++) {
            this.playerForm += '<button ng-click="ctrl.remove()">Remove</button>';

        }
    };
});

的index.html

<div class="large-3">
      <select ng-model="ctrl.num" ng-change="ctrl.change()">
          <option value="0">No. of players</option>
          <option value="1">1</option>
          <option value="2">2</option>
      </select>
      {{ctrl.playerForm}}
  </div>

1 个答案:

答案 0 :(得分:0)

我尝试了类似的东西,但最终使用jQuery来实现目标。

for(i = 0; i < this.num; ++i) { $yourElement.append('<button>Your_button<button/>'); }

然后仍然使用jQuery将元素附加到DOM