display angular UI grid and values based on the user input

Question

I am working on angularjs application and as a newbie facing many issues. I have two angular UI grids. Based on the user input in the text fields it has to display the values in the UI grid. Having tough time to achieve this. Any suggestions would be helpful. Please find the demo of my code here.

When User types/selects Atlanta in From text field and Chicago in To text field and click on SearchLocations button, it has to show the grid with values displayed under name AtlantaChicago. Like wise when user type NewYork and chicago it has to show gird values displayed under name NewYorkChicago. When there are no values entered in textboxes no grid should be displayed. Any suggestions would be very helpful.

HTML code:

  <body style="padding-left:15px" ng-controller="searchController">
    <form class="form-inline">

    <div class="row">
        <div class="form-group" ng-controller="citiesCtrl">
            <label>From</label>
            <input type="text" ng-model="places1" placeholder="Type Departure City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
        </div>
        <div class="form-group" ng-controller="citiesCtrl">
            <label>To</label>
            <input type="text" ng-model="places2" placeholder="Type Destination City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
        </div>
    </div>

    <input type="submit" value="SearchLocations"  ng-submit="submit()">
    <div ng-repeat="user in users">
        <h3>{{user.name}}</h3>
        <div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
    </div>

</form>
</body>

js code:

   angular.module('myApp', ['ngAnimate', 'ui.bootstrap','ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit','ui.grid.cellNav']);
         angular.module('myApp').controller('citiesCtrl',function($scope){
            $scope. places = undefined;
            $scope.items = ["Atlanta", "Chicago", "NewYork"];
            $scope.selectAction = function() {
                console.log($scope.places1);

            };
       });

   /*Controller for searchLocations button*/
        angular.module('myApp').controller('searchController', ['$scope', function($scope) {
            $scope.submit = function() {
                alert("in submit");
                if ($scope.places1) {
                    alert("inside the condition");
                    /*                            $scope.list.push(this.places1);
                     $scope.places1 = '';
                     */                      }
            };
            $scope.users = [
                {'name' : 'AtlantaChicago',
                    'show' : true,
                    'details' : [
                        {"Travel Date": "10/10/2014",  commute:"Bus"},
                        {"Travel Date": "10/11/2014",  commute:"flight"}]
                },
                {'name' : 'NewYorkChicago',
                    'show' : true,
                    'details': [
                        {"Travel Date": "3/15/2016",  commute:"flight"},
                        {"Travel Date": "10/12/2016",  commute:"flight"},
                    ]
                }
            ];
            $scope.gridOptions = {
                enableFiltering: true,
                columnDefs: [
                    { name: 'Travel Date', width: '5%'},
                    { name: 'Departurecommute', enableFiltering: false, width: '12%' }
                ],
                rowHeight: 20,
                enableHorizontalScrollbar:2

            };
        }]);

TheSameSon · Accepted Answer · 2017-02-09 16:56:54Z

0

You need to define places in parent scope - searchController. In this case your children (citiesCtrl) will inherit them and modify when model changes, so you'll be able access changed value with submit() call in parent. Otherwise each citiesCtrl will create its own places variable.

Here is your updated example

answered Feb 9, 2017 at 16:56

TheSameSon

3691 silver badge9 bronze badges

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

Collectives™ on Stack Overflow

display angular UI grid and values based on the user input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related