CODEWITHSUNDEEP
javascripthtmlangularjsformsinput
Ajv2324
Ajv2324

Reputation: 522

How can I get a value from a form and use it in a controller?

My code: http://pastebin.com/AyFjjLbW

I'm trying to learn AngularJS and in the beginning it was going well but now I am stuck. What I want to do is use the drop down menu to select a priority and a type of job that can be done but I can not figure out how on earth I can get a value from a input tag and use it in my script when I try to push a value from an array into my object.

You can see my failed attempt here: priority: $scope.priority[other_options.worktype]

Thank you!

Upvotes: 0

Views: 160

Answers (3)

Charlesthk
Charlesthk

Reputation: 9684

Here is the proper way of doing what you want :

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

Upvotes: 1

Darcey Mckelvey
Darcey Mckelvey

Reputation: 556

Take a look at http://www.quora.com/How-do-I-get-HTML-form-input-value-in-AngularJs-controller it is very good. Hope this is what you need.

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

Your form field should have ng-model associated with them so that you can access those value inside controller scope. Basically when your create a form with name attribute, at that time name attribute gets added to controller scope variable & then that scope variable will give you all the form related validation inside the object.

Markup

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

Then only you can access this value inside controller using like $scope.formData.worktype

Code

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

Upvotes: 1

Related Questions