Question

我有一个像这样的文本字段列表

    <ul>
        <li><input type="text" name="option1" ng-model="option1" /></li>
        <li><input type="text" name="option2" ng-model="option2" /></li>
    </ul>

我想找到$ scope中的所有选项* 提前感谢您的回答

Answer 1

我会创建一个数组，它将保存输入数据，然后添加一个循环来在html中迭代这个数组。然后，您将不需要在范围内搜索特定对象，您将准备好阵列。

$scope.allOptions = [
    {name: 'option1', text: ''},
    {name: 'option2', text: ''}
];

然后：

<ul>
    <li ng-repeat="option in allOptions"><input type="text" name="{{option.name}}" ng-model="option.text" /></li>
</ul>

问题是我不知道列表中文本字段的数量。默认情况下，应用程序有两个列表，但也有一个允许用户以编程方式添加新选项的按钮。因此，对于Jquery，我在每个文本字段中添加了ng-model中的渐进数字。第一个ng-model = option1，第二个选项2，......

我建议使用angular then（添加另一个输入）。

$scope.addInput = function(){
    var n = $scope.allOptions.length;
    $scope.allOptions.push({name: 'option'+(n+1), text: ''});
};

<button ng-click="addInput()">Awesomeness is here</button>

Answer 2

有几种方法可以做到这一点。

See this working jsFiddle

我向您展示的第一种方法将是您完成方式的自然下一步，并允许您按照要求访问这些值。

首先，将输入绑定到数组，如下所示：

<ul>
    <li><input type="text" name="option[1]" ng-model="option[0]" /></li>
    <li><input type="text" name="option[2]" ng-model="option[1]" /></li>
    <li><input type="text" name="option[3]" ng-model="option[2]" /></li>
</ul>

不要忘记将变量声明为控制器中的数组：

$scope.option = [];

然后，在您的控制器中，您可以通过$scope.option访问它们。

更高级，更简单/更易于维护的方法可能是使用ng-repeat，这是非常强大的。 ng-repeat documentation

使用ng-repeat：

首先，在控制器中设置对象数组，如下所示：

$scope.rOptions = [
   {name: 'option1', val: ''},
   {name: 'option2', val: ''},
   {name: 'monkey', val: ''}
];

然后，您可以使用一组简化的标记输出HTML：

 <ul>
    <li ng-repeat="rOption in rOptions"><input name="{{rOption.name}}" ng-model="rOption.val"></li>
</ul>

并且，在您的控制器中，您可以通过$scope.rOption访问这些值。

您可以查看上面的小提琴，看看这两者是如何工作的，以及如何访问数据。

在$ scope中查找具有以某个字符串开头的键的对象？

2 个答案: