如果显示整行内容,则使用角度ng

Angular ng-if show content entire row

本文关键字:ng 显示 如果      更新时间:2023-09-26

我想显示整行的内容。现在,我的内容仅显示在"名称"列中。点击"更多"可以显示内容。我创建了一个Plunker:

窗口必须绘制得更大,以便在Plunker中正确显示内容。Plunker

这是我的数据

 $scope.data = [{
    "example": "5235235",
    "name": "22222",
    "__v": 0,
    "test": {
      "a": "731",
      "b": "671",
      "c": "671",
      "d": "671",
      "e": "671",
      "f": "671",
      "g": "671",
      "h": "1342",
      "i": "1342",
      "j": "1342",
      "k": "1342",
      "l": "1342",
      "m": "1322",
      "n": "1342"
    }
  }]

表:

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Example</th>
        <th>Test</th>
        <th>Button</th>
      </tr>
      <tr>

      </tr>
    </thead>
    <tbody ng-repeat="dat in data ">
      <tr>
        <td>{{dat.name}}</td>
        <td>{{dat.example}}</td>
        <td>{{dat.test.a}}</td>
        <td>
          <button ng-click="show=!show" class="btn btn-info">
            <span class="glyphicon glyphicon-pencil">More</span>
          </button>
        </td>
        <tr class="dat-details" ng-if="show">
          <td>
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label class="col-md-2 control-label">Name</label>
                <div class="col-md-3">
                  <input ng-model="dat.name" class="form-control" placeholder="Name" type="text" />
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-2 control-label">Example</label>
                <div class="col-md-3">
                  <input ng-model="dat.example" class="form-control" placeholder="Example" type="text" />
                </div>
              </div>
              <div class="form-group">
                <div class="form-group">
                  <span class="col-md-2 control-label">Test</span>
                </div>
                <div class="col-md-12">
                  <div class="form-group ">
                    <label class="col-md-2 control-label">A</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.a" class="form-control" type="text" />
                    </div>

                    <label class="col-md-2 control-label">B</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.b" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">C</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.c" class="form-control" type="text" />
                    </div>

                    <label class="col-md-2 control-label">D</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.d" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">E</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.e" class="form-control" type="text" />
                    </div>

                    <label class="col-md-2 control-label">F</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.f" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">G</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.g" class="form-control" type="text" />
                    </div>

                    <label class="col-md-2 control-label">H</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.h" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">I</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.i" class="form-control" type="text" />
                    </div>

                    <label class="col-md-2 control-label">J</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.j" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">K</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.k" class="form-control" type="text" />
                    </div>

                    <label class="col-md-2 control-label">L</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.l" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
                <div class="col-md-12">
                  <div class="form-group row">
                    <label class="col-md-2 control-label">M</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.m" class="form-control" type="text" />
                    </div>

                    <label class="col-md-2 control-label">N</label>
                    <div class="col-md-4">
                      <input ng-model="dat.test.n" class="form-control" type="text" />
                    </div>
                  </div>
                </div>
              </div>
              <button ng-click="show=!show" class="btn btn-success">
                <span class="glyphicon glyphicon-ok"></span> Updaten
              </button>
            </form>
          </td>
        </tr>
    </tbody>
  </table>

Plunker:Plunker

@p。。。P…写在评论上:

您需要添加colspan。<tr class="dat-details" ng-if="show"> <td colspan="4">