Angularjs Bind Data with label and Passing in Form

Question

I'm trying to bind input data with label tag and also using same ng-model in posting method but at a time only one thing work when i try to pass in posting method for label it doesn't work. due to that i face issue to delete a item with strange uId

--View Code--

<div class="row">
    <div ng-app="learning" ng-controller="LearnController">
        <br />  
        <form  method="post" ng-submit="submitStudnetForm()">
            <label>Your ID: {{uId}}</label>
            <input class="form-control " type="text" ng-model="uId" name="CustomerId" />

            <label>Your Name: {{uName}}</label>
            <input type="text" ng-model="uName" class="form-control " name="Name" />

            <label>Your Country: {{uCountry}}</label>
            <input type="text" ng-model="uCountry" class="form-control " name="Country"/>

            <input type="submit" value="Create" />
            <a href="~/Home/Delete/{{uId}}" class="btn btn-danger">Delete</a>
        </form>
    </div>
</div>

--Script--

//1. create app module
var studentApp = angular.module('learning', []);

//2. create controller
studentApp.controller("LearnController", function ($scope, $http) {

    //3. attach originalStudent model object
    $scope.originalStudent = {
        CustomerId: uId,
        Name: uName,
        Country: uCountry,           
    };

    //4. copy originalStudent to student. student will be bind to a form
    $scope.student = angular.copy($scope.originalStudent);

    //5. create submitStudentForm() function. This will be called when user submits the form
    $scope.submitStudnetForm = function () {
        var onSuccess = function (data, status, headers, config) {
            alert('Student saved successfully.');
        };
        var onError = function (data, status, headers, config) {
            alert('Error occured.');
        }
        console.log($scope.student)
        $http.post('/Home/Index', { customer:$scope.student })
            .success(onSuccess)
            .error(onError);
    };

    //6. create resetForm() function. This will be called on Reset button click.
    $scope.resetForm = function () {
        $scope.student = angular.copy($scope.OriginalStudent);
    };
});

Looking at your controller, shouldn't it be ng-model="student.uId", ng-model="student.uName" and ng-model="student.uCountry"? — Alon Eitan
– Alon Eitan, Commented Jan 29, 2020 at 6:14
using these ng-model result is same , once i use it in method it doesn't work otherwise fine. — Waqas Nawaz Warraich
– Waqas Nawaz Warraich, Commented Jan 29, 2020 at 6:41

Chetan Patel · Accepted Answer · 2020-01-29 06:21:43Z

0

They are the scope variables-

Replace your code segment with the below

$scope.originalStudent = {
                CustomerId: $scope.uId,
                Name: $scope.uName,
                Country: $scope.uCountry,

            };

As suggested in the comment, ng-model for input should be student.uId, student.uName, student.uCountry

Updated HTML code -

<div class="row">
    <div ng-app="learning" ng-controller="LearnController">
        <br />  
        <form  method="post" ng-submit="submitStudnetForm()">
            <label>Your ID: {{student.uId}}</label>
            <input class="form-control " type="text" ng-model="student.uId" name="CustomerId" />

            <label>Your Name: {{student.uName}}</label>
            <input type="text" ng-model="student.uName" class="form-control " name="Name" />

            <label>Your Country: {{student.uCountry}}</label>
            <input type="text" ng-model="student.uCountry" class="form-control " name="Country"/>

            <input type="submit" value="Create" />
            <a href="~/Home/Delete/{{student.uId}}" class="btn btn-danger">Delete</a>
        </form>
    </div>
</div>

edited Jan 29, 2020 at 6:21

answered Jan 29, 2020 at 6:14

Chetan Patel

7824 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alon Eitan Over a year ago

He's also not binding the properties to the $scope.student object in the view

Collectives™ on Stack Overflow

Angularjs Bind Data with label and Passing in Form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related