CODEWITHSUNDEEP
htmlangularjsng-switch
Quinn Tai
Quinn Tai

Reputation: 55

ng-switch not passing argument

I'm using ng-switch to switch between two functionalities on my webapp, downloading and uploading (controlled by two buttons). When the user wants to download, I use a textbox and submit button to pass the search query to an $http POST request in my js file.

This is the HTML code:

<button class="btn" name="search" ng-click="name = 'download'">Search & Download</button>
<button class="btn" name="upload" ng-click="name = 'upload'">Upload & Index</button>

<div ng-switch="name">
    <div ng-switch-when="download">
        <input type="text" ng-model="docsterm"  my-enter="postData()" placeholder="Search">
        <br><br>
        <uib-accordion close-others="oneAtATime">
            <div uib-accordion-group class="panel-default" heading={{result._source.filename}} ng-repeat="result in results.data.hits.hits">
                <span ng-bind-html="highlight(result._source.attachment.content, docsterm)"></span>
                <br><br>
                <button class="btn">Preview</button>
                <!-- Create the download button -->
                <a href=""><button class="btn" ng-click="download(result._source.data, result._source.filename, result._source.attachment.content_type)"><i class="fa fa-download"></i></a>
                <!-- <textarea id="textbox">Type something here</textarea> <button id="create">Create file</button> <a download="info.txt" id="downloadlink" style="display: none">Download</a> -->

                <br>
                <!--
            <ul uib-pagination boundary-links="true" total-items="results['hits']['total']"  ng-model="currentPage" items-per-page="5" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></ul>
            -->
            </div>
        </uib-accordion>
    </div>

    <div ng-switch-when="upload">
        <!-- Multiple files -->
        <button class="btn" ngf-select ng-model="files" ngf-multiple="true">Select Files</button>
        <button class="btn" ng-click="submit()">Submit</button>
    </div>
</div>

This is my js code:

docsApp.controller('docsController', function ($scope, $http, $sce) {

$scope.docsterm = "";
$scope.results = "";
$scope.currentPage = 1;
$scope.content = "";
$scope.content_type = "";

$scope.postData = function(docsterm) {
    $http({
        url: 'http://192.168.100.30:9200/my_index4/_search?q=' + $scope.docsterm,
        method: "POST"
    })
    .then(function(response) {
        $scope.results = response;
        // $scope.content_type = response.data.
        console.log($scope.results);
        /*console.log($scope.content);
        console.log($scope.content_type);*/
    },
    function(response) { // optional
        $scope.results = "No results found."
    });
}

However, docsterm is not being passed through to the js file. In the console, I can see the $http request being sent is:

http://192.168.100.30:9200/my_index4/_search?q=

It should be:

http://192.168.100.30:9200/my_index4/_search?q=whateverDocstermIs

Of note, the exact download function code works fine when it is not nested inside the ng-switch, which leads me to believe that ng-switch is causing some issues.

Any ideas? Thanks!

Upvotes: 1

Views: 152

Answers (1)

Aleksey Solovey
Aleksey Solovey

Reputation: 4191

My guess, it's because ng-switch behaves like ng-if - it creates its own scope.

To reach the scope of the controller you need to have $parent. before the model

<input type="text" ng-model="$parent.docsterm"  my-enter="postData()" placeholder="Search">

Here is an example of this (with and without $parent) 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "download"
  $scope.foo = function() {
    console.log("Works:", $scope.docsterm);
    console.log("Doesn't work:", $scope.docsterm2);
  }
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <div ng-switch="name">
      <div ng-switch-when="download">
        <input type="text" ng-model="$parent.docsterm">
        
        <input type="text" ng-model="docsterm2">
        
        <button ng-click="foo()">Click</button>
      </div>
      <div ng-switch-when="upload">
        ...
      </div>
    </div>
  </div>
</body>
</html>

Upvotes: 1

Related Questions