Javascript 如何从窗体中获取值并在控制器中使用它？
我的代码： 我正在努力学习AngularJS，一开始进展顺利，但现在我被卡住了。我想做的是使用下拉菜单来选择优先级和可以完成的工作类型，但我不知道如何从输入标记中获取值，并在我尝试将数组中的值推送到对象时在脚本中使用它 您可以在此处看到我失败的尝试： 优先级：$scope.priority[其他选项.工作类型]Javascript 如何从窗体中获取值并在控制器中使用它？,javascript,html,angularjs,forms,input,Javascript,Html,Angularjs,Forms,Input,我的代码： 我正在努力学习AngularJS，一开始进展顺利，但现在我被卡住了。我想做的是使用下拉菜单来选择优先级和可以完成的工作类型，但我不知道如何从输入标记中获取值，并在我尝试将数组中的值推送到对象时在脚本中使用它 您可以在此处看到我失败的尝试： 优先级：$scope.priority[其他选项.工作类型] 谢谢大家! 表单字段应具有与其关联的ng model，以便您可以访问控制器范围内的那些值。基本上，当您使用name属性创建表单时，name属性被添加到controllerscopevar
谢谢大家! 表单字段应具有与其关联的
ng model范围内的那些值。基本上，当您使用name属性创建表单时，name属性被添加到controllerscope
variable&然后该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>
看一看，它很好。希望这就是你所需要的。以下是做你想做的事情的正确方法：
<!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 }}
<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>
亚历克斯的待办事项清单
待办事项清单
清除列表
怎么办：
要做：
{{x.name}{{x.type.label}{{x.priority.label}}
完整的
angular.module（'todoApp.controllers'，[]）
.controller（'placingItems'，['$scope'，函数（$scope）{
$scope.thing=“无”；
$scope.items=[]；
$scope.priorityList=[{
标签：'最高优先级'，
身份证号码：1
}, {
标签：“中等优先级”，
身份证号码：2
}, {
标签：“低优先级”，
身份证号码：3
}];
$scope.worktypeList=[{
标签：'工作'，
身份证号码：1
}, {
标签：'个人'，
身份证号码：2
}];
$scope.add=函数（）{
$scope.items.push({
名称：$scope.thing，
优先级：$scope.priority，
类型：$scope.worktype
});
};
$scope.clear_all=函数（）{
$scope.items=[]；
};
}]);
var app=angular.module（'todoApp'，['todoApp.controllers']）；
通过官方教程学习角度。它将回答你的大部分问题。另外，请看一下表单
指令：谢谢，这很有效！将ng模型添加到select中是否会使所选内容存储在模型中？另外，如何仅输出对象的值？现在，输出是整个对象，如{“label”：“work”，“id”：“1”}，只需调用object.label或object.id等属性即可
<!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 }}
<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>