Question

我有一个网页，可以生成表单，通过远程服务器上的REST API更新内容。表单是用PHP生成的。

表格如下：

Textfield: name
textfield: description
select: type (ng-model="selection")
  option a
  option b
  option c
textfields f1, f2, f3: some of these are hidden depending on the selection.
button that fires (update()) AngularJS when pressed.

页面上有多个此类表单。

如何使用AngularJS获取要传递给update（）的字段内容？我以为我可以使用Javascript getElementById并为那些东西做一些魔术，但我敢打赌会有一种更美妙的方式去做。

Answer 1

您可以为每个表单字段设置ng-model。在update方法内，您可以使用$scope对象访问它们。

E.g

<input type="text" ng-model="form1.name">
<input type="text" ng-model="form1.description">
...
...

<input type="text" ng-model="form2.name">
<input type="text" ng-model="form2.description">

的js

在update方法中，您可以使用$scope.form1.name，$scope.form1.description

访问它

Answer 2

在AngularJS中，您可以使用ng-model属性将数据绑定到表单。

查看文档中的示例：

 <form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>

http://plnkr.co/edit/qr1HdCqgr7jvf5aR0Gb2?p=preview

将模型作为一个对象的一部分并且仅在此对象上定义属性是一种很好的做法（在上面的表单中，表单数据的模型是用户对象，每个字段用于指定此属性的属性object，user.email例如）。

然后，在您的控制器中，您可以通过相应的范围变量（在我们的示例中为$ scope.user）访问您的表单值。

Answer 3

您可以创建选项卡，其中每个选项卡都是一个表单（编辑一个项目），单击一个选项卡将打开当前元素，您可以编辑它。这样你就不需要知道会有多少元素。

<div ng-app>
    <article ng-controller="AplicationCtrl">
        <ul>
            <li ng-repeat="item in items">
                <a href="javascript:;" ng-click="changeSelected($index)">Tabs {{$index}}</a>
            </li>
        </ul>
        <br/>
       <div>
           <input ng-model="selectedItem.name"/>
           <input ng-model="selectedItem.description"/>
        </div>

        <a href="javascript:;" ng-click="update()">Update values</a>
    </article>
</div>

function AplicationCtrl($scope) {
    $scope.items = [
        {
            name: 'this is name1',
            description: 'desc 1'
        },
        {
            name: 'this is name 2',
            description: 'desc 2'
        },
        {
            name: 'this is name 3',
            description: 'desc 4'
        }
    ]

    $scope.changeSelected = function (index) {
        $scope.selectedItem = $scope.items[index];
    }

    $scope.changeSelected(0);

    $scope.update = function () {
        console.log($scope.items);
    }
}

你可以在这里查看： http://jsfiddle.net/9c567te7/

AngularJS，页面上多个生成的表单。如何获取表格的内容

3 个答案: