Question

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

这是我迄今为止所拥有的关于这个链接的链接，

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;

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

按下按钮时的角动态形状负载

1 个答案: