Question

我正在开发angularjs应用程序，并作为面临许多问题的新手。我有两个角度UI网格。根据文本字段中的用户输入，它必须在UI网格中显示值。有艰难的时间来实现这一目标。任何的意见都将会有帮助。请查看我的代码here的演示。

当用户在 From 文本字段中键入/选择Atlanta时，在 To 文本字段中选择Chicago并单击 SearchLocations 按钮，它必须显示名称为AtlantaChicago的值显示的网格。当用户键入NewYork和芝加哥时，它必须显示在名称NewYorkChicago下显示的gird值。如果在文本框中没有输入值，则不应显示网格。任何建议都会非常有用。

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

            };
        }]);

Answer 1

您需要在父范围中定义places - searchController。在这种情况下，您的孩子（citiesCtrl）会继承它们并在模型更改时进行修改，因此您可以通过父级submit()调用来访问更改后的值。否则，每个citiesCtrl都会创建自己的places变量。

Here is your updated example

根据用户输入显示角度UI网格和值

1 个答案: