locked
Angular text box error RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User81789783 posted

    hello to every one!!

    i have below code and i want that when user click on button ..it should display what ever written in text box ..but its not working as required any help ??

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SampleApp._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/SampleController.js"></script>
    <title></title>
</head>
<body ng-app="sampleApp" ng-controller="sampleController">
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Name
                    </td>
                    <td>
                        <input type="text" ng-model="name" />
                         <button ng-click='sayHello()'>greet</button>
                    </td>
                </tr>
            </table>

            <br /><br />

       {greeting}

        </div>
    </form>
</body>
</html>

    angular.module('sampleApp', [])
.controller('MyController', ['$scope', function ($scope) {
   // $scope.username = 'World';

    $scope.sayHello = function () {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
}]);

    Friday, September 14, 2018 1:17 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User61956409 posted

    Hi erum,

    i want that when user click on button ..it should display what ever written in text box

    In your code, we can find that you use the ng-controller directive (ng-controller="sampleController") to add a controller to your application, but you name the controller with "MyController" in your JavaScript code, which causes the issue. You can refer to the following code snippet to modify your code.

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="sampleController">
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>Name
                    </td>
                    <td>
                        <input type="text" ng-model="name" />

                        <button type="button" ng-click='sayHello()'>greet</button>
                    </td>
                </tr>
            </table>

            <br />
            <br />

            {{greeting}}
        </div>
    </form>
</body>
</html>
<script>
    var app = angular.module('sampleApp', []);

    app.controller("sampleController", function ($scope, $http) {
        $scope.sayHello = function () {
            $scope.greeting = 'Hello ' + $scope.name + '!';
        };
    })
</script>

    Test result:

    Besides, you are using asp.net webfrom application, please set button type to "button" to prevent submit form.

    <button type="button" ng-click='sayHello()'>greet</button>

    With Regards, 

    Fei Han

    Monday, September 17, 2018 5:57 AM