AngularJS ng选项，可以使用可变数量的ng模型

AngularJS ng-options with variable amount of ng-models possible?

本文关键字：ng 模型 选项 可以使 AngularJS      更新时间：2023-09-26

我有一个带有标签、选择和按钮的公式。问题是这个部分应该是可变的，所以应该可以根据需要多次添加此行：

<div class="form-group" ng-repeat="cLine in cLines">
    <label class="col-xs-6 control-label">{{cLine.cName}}</label> 
    <div class="col-xs-6">
         <div class="input-group">
            <select ng-model="<!-- first try: -->cLine.cColor for cLine in cLines" class="form-control" id='polylineColor' ng-options="color.name for color in colors"></select>
            <span class="btn btn-default input-group-addon" style="background-color:white;" ng-click="addNewObject()">
                     +
            </span>
         </div>
    </div>
</div>

现在有一个"控制行"，带有Save按钮、Reset和Add按钮来添加这些行。在它们之间有一个与第一个几乎相同的"配置行"，但不是标签，而是一个用于输入该元素名称的文本字段。

标记如下：

<!-- Mask -->
<div class="form-inline" style="padding-bottom: 10px;">
    <input type="text" class="form-control text-center" placeholder="Type name here.." />
    <select ng-model="selectedColorX" class="form-control" id='polylineColor' ng-options="color.name for color in colors"></select>
</div>
<!-- Control-->
<div class="form-group" ng-show="AuthSvcs.isCurrentUserRoleIn([USER_ROLE.edit])">
    <div class="text-center">
              <!-- TODO: "Add counting line" -->
              <button type="submit" class="btn btn-default" ng-click="addLine()" ng-disabled="" ng-bind="TranslationSvcs.tr.STR_ADD_LINE"></button>     
              <button type="submit" class="btn btn-primary" ng-click="save()" ng-disabled="countingForm.$invalid || countingForm.$pristine" ng-bind="TranslationSvcs.tr.STR_SAVE"></button>
              <button type="cancel" class="btn btn-default" ng-click="reset()" ng-disabled="countingForm.$pristine" ng-bind="TranslationSvcs.tr.STR_RESET"></button>
     </div>
</div>

因此，最初没有或可能只有一行带有标签、选择和添加按钮。然后我想键入名称，（从选择中）选择一种颜色，然后单击"添加"，这样就会出现一个新行。

问题是如何连接选择？因为选择的ng模型。ng选项是可变的，所以我不能连接静态的$scope.selected或类似的东西。

现在我有我的控制器如下：

$scope.cLines = [
                     { id: 1, cColor: "red", cName: "Line 1" },
                     { id: 2, cColor: "red", cName: "Line 2" },
                     { id: 3, cColor: "red", cName: "Line 3" }
                  ];  
$scope.cColor = 0;
$scope.colors = [ {name: "red"}, {name: "blue"}, {name: "pink"}];
$scope.selectedColor1 = $scope.cLines.cColor;
$scope.selectedColor2 = $scope.colors[2]; //pink
$scope.selectedColor3 = $scope.colors[0]; //red
$scope.selectedColorX = $scope.colors[0]; //blue

因此，通常带有"selectedColor.."的解决方案无法工作。正如上面所看到的，我试图将X select/ng选项的变量ng模型链接到$scope.cLines.cColor，但不幸的是，这不起作用。

有人能帮忙吗？或者有可能吗？

我建议将新数据推送到现有数组中。添加新条目时，使用与现有项相同的格式创建一个对象，这样就可以一起处理逻辑。

当创建新的选择时，可以重用ng选项，并且它们不会相互干扰。将选定的选项保存到数据对象本身中。

$scope.add = function() {
  $scope.clines.push({
    id: $scope.clines.length + 1, // assuming the id starts from 1 and not missing any, else you have to generate your own id
    cName: $scope.name,
    cColor: $scope.color
  });
}

对于HTML，您可以重复数据数组，并将cColor本身用作ng模型

<div ng-repeat="data in clines">
  {{data.id}}.
  {{data.cName}}
  <select ng-model='data.cColor' ng-options="color.name as color.name for color in colors"></select>
</div>

全小提琴

也可以通过使用单独的ng-reeat将新数据放入单独的数组中，或者连接数组并使用相同的ng-rerep。

让你的行模型成为这个

    $scope.cLines = [
       { id: 1, cColor: "red", cName: "Line 1" ,
         colors:$scope.colors },
       { id: 2, cColor: "red", cName: "Line 2" ,
         colors:$scope.colors },
       { id: 3, cColor: "red", cName: "Line 3",
         colors:$scope.colors }
       ];

并确保在addNewObject（）中添加行时，复制了colors数组的值。同时将选择更改为

<div class="col-xs-6">
         <div class="input-group">
            <select ng-model="cLine.cColor" class="form-control" id='polylineColor' ng-options="color.name for color in cLine.colors"></select>
            <span class="btn btn-default input-group-addon" style="background-color:white;" ng-click="addNewObject()">
                     +
            </span>
         </div>
    </div>

对所选颜色使用am数组。每个索引都将与cLines数组匹配，因此操作起来很容易。

//template.js

 <div class="form-group" ng-repeat="cLine in cLines">
        <label class="col-xs-6 control-label">{{cLine.cName}}</label> 
        <div class="col-xs-6">
             <div class="input-group">
                <select ng-model="selecteColors[$index]" class="form-control" id='polylineColor' ng-options="color.name for color in colors"></select>
                <span class="btn btn-default input-group-addon" style="background-color:white;" ng-click="addNewObject()">
                         +
                </span>
             </div>
        </div>
    </div>

//控制器.js

$scope.cLines = [
                     { id: 1, cColor: "red", cName: "Line 1" },
                     { id: 2, cColor: "red", cName: "Line 2" },
                     { id: 3, cColor: "red", cName: "Line 3" }
                  ];  
$scope.cColor = 0;
$scope.colors = [ {name: "red"}, {name: "blue"}, {name: "pink"}];
$scope.selecteColors = (function () {
  var defaultColors = [];
  for (var i = 0; i < $scope.clines.length; i++) {
    defaultColors.push($scope.colors[0].name);
  }
  return defaultColors;
})();
相关文章：