Привязка данных к html от контроллера Angularjs - PullRequest
0 голосов
/ 20 сентября 2018

Я пытаюсь связать данные из angularjs со страницей HTML, но область данных не отображается на странице html.

 (function(){
     angular.module('app',[])
          .controller('appController',appController)

        function appController($http, $scope){
                var $ctrl = this;
                this.searchLocations = ['Hamburg','Leipzig','Berlin','Düsseldorf',"Frankfurt am Main","Köln","München","Münster, Westfalen","Stuttgart"];

                this.searchWords =    ['SAP','MCSA','Online Marketing','Projektmanagement','SAP CO',"SAP FI","Bilanzbuchhalter","ITIL","PRINCE2","Six Sigma","SCRUM"];
                  console.log(this.searchWords)
                $ngOninit();

                function $ngOninit(){

                }
            };
        })();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

     
        <title>Line Graph</title>
    </head>
    <body ng-app="app" ng-controller="appController as ctrl" >
       
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 div-left col-md-6 division ">
                    <div class="form-group">
                        <label for="sel1">Select <b>SearchWord</b> to create line-graph:</label>
                        <select class="form-control" ng-model="selectedWord">
                            <option ng-repeat="word in ctrl.searchWords" value="{{word}}" >{{word}}</option>
                        </select>
                    </div>
                </div>
    
                {{ctrl.searchLocations}}
          
            </div>
        </div>

    </body>
    </html>

Здесь я хочу searchWord и searchLocation по вариантам выбора элемента.Но привязки данных недоступны на html html странице.

1 Ответ

0 голосов
/ 20 сентября 2018

используйте вместо этого ng-model = "selectedWord" {{ctrl.searchLocations}} для просмотра выбранной опции из выпадающего списка.

 (function(){
            angular.module('app',[])
                    .controller('appController',appController)


            function appController($http, $scope){


                var $ctrl = this;
                this.searchLocations = ['Hamburg','Leipzig','Berlin','Düsseldorf',"Frankfurt am Main","Köln","München","Münster, Westfalen","Stuttgart"];

                this.searchWords =    ['SAP','MCSA','Online Marketing','Projektmanagement','SAP CO',"SAP FI","Bilanzbuchhalter","ITIL","PRINCE2","Six Sigma","SCRUM"];
console.log(this.searchWords)
                $ngOninit();

                function $ngOninit(){

                }

            };
        })();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">

     
        <title>Line Graph</title>
    </head>
    <body ng-app="app" ng-controller="appController as ctrl" >
       
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 div-left col-md-6 division ">
                    <div class="form-group">
                        <label for="sel1">Select <b>SearchWord</b> to create line-graph:</label>
                        <select class="form-control" ng-model="selectedWord">
                            <option ng-repeat="word in ctrl.searchWords" value="{{word}}" >{{word}}</option>
                        </select>
                    </div>
                </div>
    
                {{selectedWord}} selectedWord
          
            </div>
        </div>

    </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...