Angularjs为每个类别添加动态表单字段

时间:2016-05-08 19:20:18

标签: angularjs forms dynamic

您好我有一个Angularjs表单,我试图为每个类别添加动态表单字段 例如:

类别1
- 添加字段
类别2
- 添加字段
类别3
- 添加字段
类别4
- 添加字段

我的表格

    <div class="form-group" ng-cloak ng-repeat="(key, value) in capital_budgets">
      <label class="col-sm-3 control-label"><% value.name %></label>
            <div class="col-sm-2">   
                <input 
                type="text"
                class="form-control input-sm" 
                ng-model="budget.capital_budget_category_id"
                >
            </div>

             <div class="clrfix"></div>

             <div ng-repeat="choice in choices">

                 <label class="col-sm-3 control-label">Name</label>
                 <div class="col-sm-2">
                  <input 
                   type="text" 
                   class="form-control input-sm" 
                   ng-model="budget.name">
                  </div>
                <div class="col-sm-2">
                  <input 
                   type="text" 
                   class="form-control input-sm" 
                   ng-model="budget.budg" 
                   >
                </div>
              <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
            <div class="clrfix"></div>  
           </div>

           <div class="col-sm-2">
            <button type="button" class="addfields" ng-click="addNewChoice()">Add fields</button>
           </div>
    </div>  

和js

$scope.capital_budgets = [ {"id":1,"name":"Furniture & Fixture","alias":"furniture_fixture"}, {"id":2,"name":"Miscellaneous Property","alias":"miscellaneous_property"}, {"id":3,"name":"Office Equipment","alias":"office_equipment"}, {"id":4,"name":"Renovation","alias":"renovation"}, {"id":5,"name":"Vehicle","alias":"vehicle"} ]
    $scope.choices = [];

        $scope.addNewChoice = function() {
            var newItemNo = $scope.choices.length+1;
            $scope.choices.push({'id':'choice'+newItemNo});
        };
        $scope.removeChoice = function() {
            var lastItem = $scope.choices.length-1;
            $scope.choices.splice(lastItem);
       };

我知道它不会工作。只适用于单一类别的某人帮助

0 个答案:

没有答案