我的代碼：http://pastebin.com/AyFjjLbW如何從表單中獲取值並將其用於控制器？
我想學習AngularJS，並在開始時它進展順利，但現在我卡住了。我想要做的是使用下拉菜單來選擇優先級和可完成的工作類型，但我無法弄清楚如何從輸入標記中獲得值，並在我的腳本中使用它時嘗試從數組中將值推送到我的對象中。
你可以在這裏看到我失敗的嘗試： 優先：$ scope.priority [other_options.worktype]
謝謝！
這裏是你想要做的事情的正確方法：
<!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>
謝謝，這個效果很好！是否添加ng-model來進行選擇使得所選內容存儲在模型中？ 另外，我將如何輸出一個對象的值？現在輸出是整個對象，如{「label」：「work」，「id」：「1」} – Ajv2324
只需調用像object.label或object.id – Charlesthk
您的表單字段應該與ng-model相關聯，以便您可以訪問控制器內的這些值scope。基本上當你創建一個帶有name屬性的表單的時候，name屬性被添加到控制器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]
});
};
看看http://www.quora.com/How-do-I-get-HTML-form-input-value-in-AngularJs-controller這是非常好的訪問此值。希望這是你所需要的。
通過官方教程https://code.angularjs.org/1.4.0-beta.6/docs/tutorial到您的工作方式學習角度。它會回答你的大部分問題。另外，看看'form'指令：https://code.angularjs.org/1.4.0-beta.6/docs/api/ng/directive/form – DonJuwe