Question

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

gcc -Wall -I/usr/include/mysql -I. -shared lib_mysqludf_sys.c -o /usr/lib/lib_mysqludf_sys.so
/usr/bin/ld: /tmp/cclkfAbr.o: relocation R_X86_64_32 against `.rodata' can not be used when making a shared object; recompile with -fPIC
/tmp/cclkfAbr.o: could not read symbols: Bad value
collect2: ld returned 1 exit status
make: *** [install] Error 1
ERROR: You need libmysqlclient development software installed
to be able to compile this UDF, on Debian/Ubuntu just run:
apt-get install libmysqlclient15-dev

现在有一个“控制行”，带有“保存”按钮，“重置”和“添加按钮”以添加这些行。在那些之间有一个“配置行”几乎与第一个相同，但不是标签，而是有一个文本字段来输入该元素的名称。

标记看起来如下：

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

所以最初没有或者一行带有标签，即选择和添加按钮。然后我想输入名称，选择一种颜色（从选择中）并单击“添加”，这样就会出现一个新行。

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

现在我的控制器如下：

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

所以通常使用“selectedColor ..”的解决方案无效。正如我上面所看到的，我试图将X选择/ ng-options的变量ng-models链接到 $ scope.cLines.cColor ，但不幸的是，这不起作用。

任何人都可以提供帮助，还是可以呢？

Answer 1

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

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

Answer 2

使你的行模型

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

Answer 3

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

创建新选择时，可以重复使用ng-options，它们不会相互干扰。将所选选项保存到数据对象本身。

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

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

Full fiddle

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

AngularJS ng-options可能具有可变数量的ng模型？

3 个答案: