Angular 1.6.4 Template

by gangadharjannu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://code.angularjs.org/1.6.4/angular-animate.js"></script>
<div ng-app="testApp" ng-controller="testController as $ctrl">
    <test-component value="$ctrl.test1"></test-component>
    <p>test service: {{$ctrl.test1}}</p>
    <p>test filter: {{$ctrl.test1 | testFilter}}</p>
    <pre>{{$ctrl.test2 | json}}</pre>
</div>

 <c-search
                conditions="['Starts With','Contains','Ends With']"
                default-condition="'Contains'"
                search-by-props="['prop1','prop2','prop3']"
                default-search-by-prop="'prop1'"
                on-search="Uc.searchGo(searchStr)"
                on-reset="Uc.resetSearchFilter()"
                ></c-search>
                
<!--Toggles search-by component-->
<div>
    <img src="AppMod/LAUNCHPAD/ImagesLms/search-top.png" class="img-default" ng-show="!searchOpen" ng-click="searchOpen=true; filterOpen=false">
    <img src="AppMod/LAUNCHPAD/ImagesLms/search-selected.png" class="img-selected" ng-show="searchOpen" ng-click="searchOpen=false; filterOpen=false">
</div>

<!-- Pops up on clicking search-by icon -->
<div class="searchUser userpopup" ng-show="searchOpen">
    <!--header: displays selected search by prop -->
    <div class="col-xs-12 search-list header">
        <div>{{CSC.defaultSearchByProp}}</div>
    </div>
    <!--displays search by props-->
    <div class="col-xs-12 search-list middle">
        <!--props -->
        <div class="col-xs-4" ng-repeat="prop in CSC.searchByProps">
            <label class="control control-radio">
                <input type="radio" name="prop" ng-checked="" ng-value="prop" ng-click="CSC.resetSearch()"/>
                <div class="control-indicator"></div>
                <span class="small-label">{{prop}}</span>
            </label>
        </div>
    </div>
    <!--search by textbox-->
    <div class="col-xs-12 search-box-popup search-list searchby"...

JavaScript

var app = angular.module('testApp', []);

app.component('testComponent', {
    bindings: {
        value: '<'
    },
    controller: ['$timeout', function($timeout) {
        var $ctrl = this;

        $ctrl.$onInit = function() {
        
        };
    }],
    template: 'test-component: {{$ctrl.value}}'
});

app.filter('testFilter', [function() {
    return function(v) {
        return v.toUpperCase();
    };
}]);

app.service('TestService', ['$timeout', function($timeout) {
    this.testMethod = function() {
        return 'service value';
    };
}]);

app.controller('testController', ['$scope', '$http', '$timeout', 'TestService', function($scope, $http, $timeout, TestService) {
    var $ctrl = this;

    $ctrl.test1 = 'tested: ' + TestService.testMethod();

    $http.post('/echo/json/', 'json=' + encodeURIComponent(JSON.stringify({
        a: true
    }))).then(function(response) {
        $ctrl.test2 = response;
    });
}]);

/*jshint ignore:start*/
'use strict';
function CSearchController() {
    var CSC = this;

    CSC.$onInit = function () {
        console.log('Now you see me', this.usersComponent);
        this.condition = this.defaultCondition;
    };
    CSC.search = function () {
        this.onSearch({ searchStr: CSC.searchUserInput });
        CSC.searchUserInput = null;
    }
    CSC.resetSearch = function(){
        this.onReset();
    };
}

CSearchController.$inject = [];

module.exports = {

    templateUrl: 'src/common/components/search/search.component.html',
    controller: CSearchController,
    controllerAs: 'CSC',
    bindings: {
        // inputs
        conditions: '<',
        defaultCondition: '<',
        searchByProps: '<',
        defaultSearchByProp: '<',
        // output
        onSearch: '&',
        onReset: '&'
    },
    // require is used whenever the component wants to communicate with parent
    require: {
        usersComponent: '^usersTab'
    }
};
/*jshint ignore:end*/