Question

＆＃13;

function DefaultController($scope, navBarService) {
    var vm = this;

    $scope.toggleHeader = true;
    $scope.userNameNav ='';
    //Sharing info with other controllers
    $scope.$on('toggleHeader', function(evt, data) {
        $scope.toggleHeader = data;
    });

    $scope.$on('changeName', function(evt, data) {
        $scope.userNameNav = data;
    });


    $scope.searchForItem = function() {
        console.log('button clicked');
        console.log($scope.userSearch);

    };

}//end DefaultController

＆＃13;

.Navigation {


    width:100%;
    height:25em;
    background-image: url('http://wallpapercave.com/wp/UYnUUzz.jpg');
    background-size: cover;
background-position:50% 50%;
position: sticky;

}

.navContent {
    float:right;
}

.searchNav {

    border: 0;
    border-bottom: 1px solid red;
    outline: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Rental app</title>
        <link rel="stylesheet" href="styles/userPage.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="vendors/angular.min.js" charset="utf-8"></script>
        <script src="vendors/angular-route.min.js" charset="utf-8"></script>
        <script src="scripts/controllers/defaultController.js" charset="utf-8"></script>
        <script src="scripts/controllers/RegisterController.js" charset="utf-8"></script>
        <script src="scripts/controllers/LoginController.js" charset="utf-8"></script>
        <script src="scripts/controllers/userController.js" charset="utf-8"></script>
        <script src="scripts/client.js" charset="utf-8"></script>
        <script src="scripts/services/credentialsService.js" charset="utf-8"></script>
        <script src="scripts/services/navBarService.js" charset="utf-8"></script>
        <script src="scripts/services/addItemSerivce.js" charset="utf-8"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert-dev.min.js" charset="utf-8"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
        <link rel="stylesheet" href="styles/register.css">
        <link rel="stylesheet" href="styles/style.css">
    </head>
    <body ng-app='myApp'>
        <div class="" ng-controller='DefaultController'>
            <div class="navImage">


            <div class="Navigation" ng-if='toggleHeader'>
                <div class="navContent">
                    <a href="http://localhost:7138/#!/login">Logout</a>
                    <input class='searchNav' type="button" name="button" value="Search" ng-click='searchForItem()' >
                    <input id='getUserInput' type="text"  placeholder="Search Item" ng-model='userSearch'/>{{ userSearch }}

                </div>

                <h1 class='greetUser'>Welcome {{userNameNav}}</h1>

            </div>
            </div>
            <ng-view></ng-view>
        </div>

    </body>
</html>

＆＃13;

在html文件中，我希望在单击搜索按钮时获取用户搜索的值。我能够获得一个单击＆＃39;按钮的控制台日志，但我无法获得搜索框的值。我也试过使用vm，但是没有用，所以我把它拿出来了

Answer 1

在将变量放入模型之前，应该在控制器中声明变量。您可以编写：$scope.formData = {};并在HTML和JS中使用此对象。

使用此版本：

function DefaultController($scope, navBarService) {
    var vm = this;

    $scope.toggleHeader = true;
    $scope.userNameNav ='';
$scope.formData = {};
    //Sharing info with other controllers
    $scope.$on('toggleHeader', function(evt, data) {
        $scope.toggleHeader = data;
    });

    $scope.$on('changeName', function(evt, data) {
        $scope.userNameNav = data;
    });


    $scope.searchForItem = function() {
        console.log('button clicked');
        console.log($scope.formData.userSearch);

    };

}//end DefaultController

在你的模板中：

<input id='getUserInput' type="text"  placeholder="Search Item" ng-model='formData.userSearch'/>{{ formData.userSearch }}

如何使用angular获取输入框的值

1 个答案: