Question

<!-- code snippet of html -->

<div class="form-group">
    <label for="items" class="col-sm-2 control-label">Items</label>
    <div class="pull-left input-group">
        <input type="text" class="form-control" ng-model="name">
        <span class="input-group-btn">
              <button type="button" class="btn btn-default" ng-click="addNewItem()">Add</button>
        </span>
    </div>
    <div>
        <ul class="pull-left">
            <li ng-repeat="item in items">
                <p style="display: inline-block">{{item}}</p>
                <button type="button" class="btn btn-default" ng-click="deleteItem(item)">Delete</button>
            </li>
        </ul>
    </div>
</div>
<div class="form-group">
    <label for="anotherField" class="col-sm-2 control-label">Another Field</label>
    <input type="text" class="form-control" ng-model="anotherField" id="anotherField">
</div>

/* code snippet in Augular controller */
  $scope.addNewItem = function() {
      if ($scope.name && $scope.name.trim()) {
          if ($scope.items.indexOf($scope.name.trim()) >= 0) {
              console.log('item name should not be duplicated');
          } else {
              $scope.items.push($scope.name.trim());
              $scope.name = '';
          }
      }
  };

  $scope.deleteItem = function(item) {
      var idx = $scope.items.indexOf(item);
      if (idx >= 0) $scope.items.splice(idx, 1);
  };

以上代码功能正常，但唯一的问题是，当我创建一个新项目时，标签应该是＆＃34; anotherField＆＃34;只是在这个项目之后立即出现（甚至与＆＃34;项目＆＃34;）的标签错位;当创建更多项目时，它只是放在第一个项目的末尾，但不像是＃34;另一个字段＆＃34;更多。任何人都可以帮助解决这个问题＆＃34;奇怪的＆＃34;风格问题？

谢谢，西华

bootstrap＆＃34; control-label＆＃34;跟随动态创建的列表时表现很奇怪

0 个答案: