Question

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

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

谢谢！

Answer 1

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

<强>标记

        <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]
        });
};

Answer 2

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

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

Answer 3

看看http://www.quora.com/How-do-I-get-HTML-form-input-value-in-AngularJs-controller这是非常好的。希望这就是你所需要的。

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

3 个答案: