How to create a site search widget in AngularJS?

C

Casper Phantom2015-11-01 10:13:40

Angular

Casper Phantom, 2015-11-01 10:13:40

there is a layout.php file that defines content and rightSide blocks.

<html ng-app="app">
<body>
  <div class=content><div ng-view></div></div>
  <div class="rightSide">
<form class="form-inline" role="form">
    <div class="input-group">
        <input
            type="text"
            name="query"
            class="form-control"
            placeholder="<?= $lang->search_place ?>"
            value="<?=$this->container->request->query('query')?>"
        />
        <span class="input-group-btn">
            <button
                class="btn btn-info"
                ng-controller="SearchCtrl"
                ng-click="setSearch(jQuery('input.form-control[mane=query]').val())"
            >
                <?= $lang->search ?>
            </button>
        </span>
    </div>
</form>
  </div>
</body>
</html>

And the corresponding js(coffeScript) to search for:

'use strict'

class SearchCtrl
  @$inject: [ '$scope', '$location', '$routeParams', 'SearchService' ]

  constructor: (@scope, @location, @routeParams, @SearchService) ->
    @scope.search_string = @routeParams.query
    this.loadingSearch()


  loadingSearch: ->
    @scope.loadingPromise = @SearchService.getList {q: @scope.search_string}

    @scope.loadingPromise.then (data) =>
      @scope.elements = data

  setSearch: (data) ->
    debugger
    @location.url '/search?query='+data


angular.module('SearchModule').controller 'SearchCtrl', SearchCtrl

Problem:
When you click on the search button, the form is sent using html and not angular and, accordingly, the debbuger does not work.
Problem2:
Somehow $location clings crookedly, maybe I cling crookedly, I'm not strong in JS.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Andrew, 2015-11-01
@R0dger

It seems to me that you mixed something
1. Give the name of the form
2. Give the model to the input
3 Check using
Angular

<form name ="searchForm">
<input type="text" name="search" ng-model="search.name" placeholder="Поиск" required>
<button type="submit" ng-click="search(searchForm.$valid)">Поиск</button>

accordingly search.name in the controller will be your search string. send receive and do whatever you want..

код контроллера
....
$scope.search = function(valid) {
 if (valid) {
Ваш код
...
}
};
</code