Javascript AngularJS ng选项是否可能具有可变数量的ng模型？

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

<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>

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

---

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

对所选颜色使用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>

{{cLine.cName}
+

//controller.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;
})();

$scope.cLines=[
{id:1，cColor:“red”，cName:“Line 1”}，
{id:2，cColor:“red”，cName:“Line 2”}，
{id:3，cColor:“红色”，cName:“第3行”}
];  
$scope.cColor=0；
$scope.colors=[{name:“red”}，{name:“blue”}，{name:“pink”}]；
$scope.selecteColors=（函数（）{
var defaultColors=[]；
对于（变量i=0；i<$scope.clines.length；i++）{
defaultColors.push（$scope.colors[0].name）；
}
返回默认颜色；
})();

对所选颜色使用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>

{{cLine.cName}
+

//controller.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;
})();

$scope.cLines=[
{id:1，cColor:“red”，cName:“Line 1”}，
{id:2，cColor:“red”，cName:“Line 2”}，
{id:3，cColor:“红色”，cName:“第3行”}
];  
$scope.cColor=0；
$scope.colors=[{name:“red”}，{name:“blue”}，{name:“pink”}]；
$scope.selecteColors=（函数（）{
var defaultColors=[]；
对于（变量i=0；i<$scope.clines.length；i++）{
defaultColors.push（$scope.colors[0].name）；
}
返回默认颜色；
})();

对所选颜色使用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>

{{cLine.cName}
+

//controller.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;
})();

$scope.cLines=[
{id:1，cColor:“red”，cName:“Line 1”}，
{id:2，cColor:“red”，cName:“Line 2”}，
{id:3，cColor:“红色”，cName:“第3行”}
];  
$scope.cColor=0；
$scope.colors=[{name:“red”}，{name:“blue”}，{name:“pink”}]；
$scope.selecteColors=（函数（）{
var defaultColors=[]；
对于（变量i=0；i<$scope.clines.length；i++）{
defaultColors.push（$scope.colors[0].name）；
}
返回默认颜色；
})();

对所选颜色使用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>

{{cLine.cName}
+

//controller.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;
})();

$scope.cLines=[
{id:1，cColor:“red”，cName:“Line 1”}，
{id:2，cColor:“red”，cName:“Line 2”}，
{id:3，cColor:“红色”，cName:“第3行”}
];  
$scope.cColor=0；
$scope.colors=[{name:“red”}，{name:“blue”}，{name:“pink”}]；
$scope.selecteColors=（函数（）{
var defaultColors=[]；
对于（变量i=0；i<$scope.clines.length；i++）{
defaultColors.push（$scope.colors[0].name）；
}
返回默认颜色；
})();

将您的行设置为此模式

    $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（）中添加行时复制

颜色

数组的值。 同时将选择更改为

<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>

+

将您的行设置为此模式

    $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（）中添加行时复制

颜色

数组的值。 同时将选择更改为

<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>

+

将您的行设置为此模式

    $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（）中添加行时复制

颜色

数组的值。 同时将选择更改为

<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>

+

将您的行设置为此模式

    $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（）中添加行时复制

颜色

数组的值。 同时将选择更改为

<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>

+

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

创建新的select时，可以重用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，您可以重复ng数据数组，并使用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>

{{data.id}。
{{data.cName}

---

也可以使用单独的ng repeat将新数据放入一个单独的数组中，或者使用相同的ng repeat对数组进行concat处理。

我建议将新数据放入现有数组中。 添加新条目时，使用与现有项相同的格式创建对象，以便可以一起处理逻辑

创建新的select时，可以重用ng选项，以及