Question

我是AngularJS的新手，并且正在努力应对一些应该很容易的事情。

我有这个丑陋的页面：

用户在此屏幕上添加新啤酒，啤酒可能有多种样式 - 因此“添加”按钮会创建一个新的“样式”组合框，左侧的“删除”也会删除它。

问题是，当用户从列表中选择一个样式时，它在组合框中显示为未选中 - 即，在下拉列表再次折叠/关闭后，样式字段将为空。

所以这是我的代码：

啤酒视图

   <div class="form-group" ng-repeat="style in beer.styles">
        <label for="style" class="col-sm-1 control-label" ng-if="$index == 0" >Style</label>
        <div class="col-sm-1" ng-if="$index > 0">
          <button type="button" class="btn btn-danger" ng-click="removeStyle($index)">Remove</button>
        </div>
        <div class="col-sm-10">
          <select class="form-control"
                  ng-controller="styleCtrl"
                  ng-model="selectedStyleId"
                  ng-options="style.id as style.name for style in styles"
                  ng-change="updateStyle($index, selectedStyleId)">
          </select>
        </div>
        <div class="col-sm-1">
          <button type="button" class="btn btn-primary" ng-click="addNewStyle()">Add</button>
        </div>
      </div>

样式控制器（Dummy Impl）

.controller('styleCtrl', ["$scope", "$location", function ($scope, $location) {
  $scope.styles = [
    { 'id': '1',
      'name': 'Lager' },
    { 'id': '2',
      'name': 'American Blonde Ale' },
    { 'id': '3',
      'name': 'American Stout' },
    { 'id': '4',
      'name': 'Cream Ale' },
    { 'id': '5',
      'name': 'Bock' },
    { 'id': '6',
      'name': 'German Pilsener' }
  ];
}]);

啤酒控制器

.controller('beerCtrl', ["$scope", "$location", function ($scope, $location) {
  $scope.beer = {
    'styles': [
        { 'id' : '-1' }
    ]
  }

  $scope.addNewStyle = function() {
    $scope.beer.styles.push({ 'id': '-1' });
  }

  $scope.removeStyle = function(index) {
    $scope.beer.styles.splice(index, 1);
  }

  $scope.updateStyle = function(index, styleId) {
    $scope.beer.styles[index] = { 'id': styleId };
  }

在数组中正确设置了styleId，唯一的问题是在屏幕上。

您是否发现我的代码中有任何错误？

P.S。：我怀疑我有两个控制器 - 同一视图中的BeerController和'嵌套'StyleController可能与根本原因有关。

Answer 1

正如我所提到的，我对AngularJS来说是全新的，所以我的错误很简单。我没有使用on-change，而是将所选值直接绑定到后备对象：

 <select class="form-control"
          ng-controller="styleCtrl"
          ng-model="beer.styles[$index].id"
          ng-options="style.id as style.name for style in styles">

完成了工作。愚蠢的疏忽。

选定的ng-options项目不会粘在'组合框'上

1 个答案: