按下按钮时的角度动态表单加载

Question

尝试创建一个页面，在该页面中，可以通过多个按钮在按下按钮时加载不同的表单。每次用户按下按钮时，都需要将相应的表单添加到页面中。关键是，表单需要按按钮按下的顺序加载，并且每个表单都有不同的输入字段，由按钮表示。

这是我到目前为止所拥有的 plunker 链接，

http://plnkr.co/edit/OQYmoi99K1BZl4YwIMGG?p=preview

HTML

<ul>
            <div ng-repeat="form in forms">
              <div ng-if="showTransport(form)">
                <li class="list-group-item">
                  <div>{{from.name}} Name:
                    <input type="text" class="xdTextBox" ng-model="form.fields.tName" /> Comment:
                    <input type="text" class="xdTextBox" ng-model="form.fields.tComment" />
                  </div>
                </li>
              </div>

              <div ng-if="showLodging(form)">
                <li class="list-group-item">
                  <div>{{from.name}} Name:
                    <input type="text" class="xdTextBox" ng-model="form.fields.lName" /> Comment:
                    <input type="text" class="xdTextBox" ng-model="form.fields.lComment" />
                  </div>
                </li>
              </div>
            </div>
          </ul>

JavaScript

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

app.directive('ngIf', function() {
    return {
        link: function(scope, element, attrs) {
            if(scope.$eval(attrs.ngIf)) {
                // remove '<div ng-if...></div>'
                element.replaceWith(element.children())
            } else {
                element.replaceWith(' ')
            }
        }
    }
});

app.controller('MainCtrl', function($scope) {

  $scope.forms = [{
      name: "form_1",
      type: 't',
      fields: [{
        tName: '',
        tComment: ''
      }]
    }];

  $scope.addTransport = function() {
    frmCnt++;
    $scope.forms.push({
      name: "form_" + frmCnt,
      type: 't',
      fields: [{
        tName: '',
        tComment: ''
      }]
    });
  }

  $scope.addLodging = function() {
    frmCnt++;
    $scope.forms.push({
      name: "form_" + frmCnt,
      type: 'l',
      fields: [{
        lName: '',
        lComment: ''
      }]
    });
  }


  $scope.showTransport = function(form) {
      return form.hasOwnProperty("type=='t'")
  }
  $scope.showLodging= function(form) {
      return form.hasOwnProperty("type=='l'")
  }

});

我无法让它工作。我究竟做错了什么？这是正确的方法吗？

任何帮助将不胜感激。

Answer 1

我注意到的第一件事是return form.hasOwnProperty("type=='t'") 和return form.hasOwnProperty("type=='l'") 总是返回false。我觉得应该是

if(form.hasOwnProperty('type')){ return type === 't' } return false;

我叉了你的 plunk，看看它是否像你想要的那样工作：http://plnkr.co/edit/8K8JHVIbzQQgN6QnssJe?p=preview