如何从表单中获取值并在控制器中使用它？答案

【问题标题】：How can I get a value from a form and use it in a controller?如何从表单中获取值并在控制器中使用它？
【发布时间】：2015-05-12 17:35:46
【问题描述】：

我的代码：http://pastebin.com/AyFjjLbW

我正在尝试学习 AngularJS，一开始它进展顺利，但现在我陷入了困境。我想要做的是使用下拉菜单选择优先级和可以完成的工作类型，但我无法弄清楚我到底如何从输入标签中获取值并在我的脚本中使用它尝试将数组中的值推送到我的对象中。

你可以在这里看到我失败的尝试：优先级：$scope.priority[other_options.worktype]

谢谢！

【问题讨论】：

通过官方教程code.angularjs.org/1.4.0-beta.6/docs/tutorial 学习角度。它将回答您的大部分问题。另外，看看form 指令：code.angularjs.org/1.4.0-beta.6/docs/api/ng/directive/form

标签： javascript html angularjs forms input

【解决方案1】：

这是做你想做的事情的正确方法：

<!DOCTYPE html>

<html lang="en-us" ng-app="todoApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<head>
    <title>Alex's Todo List</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div ng-controller="placingItems">
        <h1>To Do List</h1>
        <center><button type="button" ng-click = "clear_all()">Clear List</button></center>

        <p>What to do: <input type="text" ng-model="thing">
            <form name="other_options">
                <select ng-model="worktype" ng-options="worktype.label for worktype in worktypeList" ></select>
                <select ng-model="priority" ng-options="priority.label for priority in priorityList" ></select>
                <input type="submit" ng-click="add()">
            </form>
        </p>

        <div class="block">
            <p>To do:</p>
            <center><li ng-repeat = "x in items"> 
                <span ng-style="cmplt">{{ x.name }}</span> {{ x.type.label }} {{ x.priority.label }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" ng-click="cmplt={color: 'gray', 'text-decoration': 'line-through'}">Completed</button>
            </li></center>
        </div>    
    </div>
</body>
</html>

<script>
angular.module('todoApp.controllers', [])
    .controller('placingItems', ['$scope', function($scope) {
        $scope.thing = "Nothing";
        $scope.items = [];

        $scope.priorityList = [{
            label:'Top Priority',
            id: 1
        }, {
            label: 'Mid Priority',
            id: 2
        }, {
            label: 'Low Priority',
            id: 3
        }];

        $scope.worktypeList = [{
            label:'Work',
            id: 1
        }, {
            label: 'Personal',
            id: 2
        }];

        $scope.add = function(){
            $scope.items.push({
                name: $scope.thing,
                priority: $scope.priority,
                type: $scope.worktype
            });
        };

        $scope.clear_all = function(){
            $scope.items = [];
        };        
    }]);


var app = angular.module('todoApp', ['todoApp.controllers']);
</script>

【讨论】：

谢谢，这很好用！是否将 ng-model 添加到 select 中，以便将所选内容存储在模型中？另外，我如何只输出一个对象的值？现在输出是整个对象，例如 {"label": "work", "id": "1"}
只需调用object.label或object.id之类的属性

【解决方案2】：

您的表单字段应该有 ng-model 与它们关联，以便您可以在控制器 scope 中访问这些值。基本上，当您创建具有名称属性的表单时，名称属性会被添加到控制器 scope 变量中，然后该范围变量将为您提供对象内所有与表单相关的验证。

标记

        <form name="other_options" ng-init="formData={}">
            <select name="worktype" ng-model="formData.worktype">
                <option selected value="-" name = "work">Work</option>
                <option value="1" name="home">Home</option>
            </select>
            <select name="priortype" ng-model="formData.worktype">
                <option value="0" name="top">Top Priority</option>
                <option selected value="1" name="mid">Mid Priority</option>
                <option value="2" name="low">Low Priority</option>
            </select>
            <input type="submit" ng-click="add()">
        </form>

那么只有你可以在控制器中使用$scope.formData.worktype来访问这个值

代码

$scope.add = function(){
    $scope.items.push(
        {name: $scope.thing,
        priority: $scope.formData.worktype, //or $scope.formData["worktype"]
        type: $scope.type[1]
        });
};

【讨论】：

【解决方案3】：

看看http://www.quora.com/How-do-I-get-HTML-form-input-value-in-AngularJs-controller 很不错。希望这是您需要的。

【讨论】：