I am trying to get an animation to work, when you click the search button it should be pulled to the right in order to allow the user to type whatever they want to search for. However, the ng-click doesn't even seem to trigger. I have tried "alert('its working');" several times but nothing pops up. The code is below, any ideas of what the problem could be?
HTML:
<li class="pull-right">
<div>
<!-- ngIf: showNavbarSearch --><div ng-if="showNavbarSearch" class="mat-slide-right pull-right ng-scope">
<form class="search-form form-inline ng-valid pull-left ng-pristine" ng-show="showNavbarSearch" ng-submit="submitNavbarSearch()">
<div class="form-group">
<label class="sr-only" for="search-input">Search</label>
<input type="text" class="form-control" id="search-input" placeholder="Search" autofocus="">
</div>
</form>
</div><!-- end ngIf: showNavbarSearch -->
<div class="pull-right">
<button ng-click="toggleSearch()" class="btn btn-sm btn-link pull-left withoutripple">
<i class="md md-search f20"></i>
</button>
</div>
</li>
JS:
app.directive('navbarSearch', ['$timeout', function ($timeout) {
return {
restrict: 'A',
templateUrl: '/dist/assets/tpl/directives/navbar-search.html',
link: function($scope, element, attrs) {
$scope.showNavbarSearch = false;
$scope.toggleSearch = function () {
$scope.showNavbarSearch = !$scope.showNavbarSearch;
};
$scope.submitNavbarSearch = function(){
$scope.showNavbarSearch = false;
};
}
};
}]);
Does this help:
app.directive('navbarSearch', [ function () {
return {
restrict: 'A',
templateUrl: 'navbar-search.html',
controller: function($scope){
$scope.showNavbarSearch = false;
$scope.mySearch = "";
$scope.submitNavbarSearch = function(myVal){
$scope.mySearch = myVal;
console.log("submitting: " + $scope.mySearch);
$scope.showNavbarSearch = false;
}
$scope.toggleSearch = function(){
$scope.showNavbarSearch = !$scope.showNavbarSearch;
}
},
};
}]);
Template:
<li class="pull-right">
<div ng-if="showNavbarSearch" class="mat-slide-right pull-right ng-scope">
<form class="search-form form-inline ng-valid pull-left ng-pristine" ng-show="showNavbarSearch" ng-submit="submitNavbarSearch(mySearch)">
<div class="form-group">
<label class="sr-only" for="search-input">Search</label>
<input type="text" ng-model="mySearch" placeholder="Search" autofocus="">
</div>
</form>
</div><!-- end ngIf: showNavbarSearch -->
<br />
<div class="pull-right">
<button ng-click="toggleSearch()">
<i class="md md-search f20">Toggle search</i>
</button>
</div>
</li>
Usage:
<div navbar-search>
</div>
Related
I am using ex6 and angularjs and I write an angularjs validation form.
the HTML doesn't show up. it's not showing any errors.
The HTML of the validation :
<form id="form" name="login.sign" class="setup info" novalidate>
<div class="input-group login-max-width">
<span class="input-group-addon" id="login-addon">
<i class="fa fa-envelope" id="login-addon"></i>
</span>
<input id="login.credentials.email" type="email" class="form-control email validate valid"
name="login.credentials.email" ng-model="login.credentials.email" placeholder="Email" required>
</div><br />
<div class="input-group">
<span class="input-group-addon lock-fix">
<i class="fa fa-lock"></i>
</span>
<input id="login.credentials.password" type="password" class="form-control password validate valid"
name="login.credentials.password" ng-model="login.credentials.password" placeholder="Password" ng-minlength="6" required>
</div>
<center>
<div class="input-group text-center" ng-show="login.error">
<h3 class="error-show">{{login.error}}<i class="fa fa-exclamation-triangle"></i></h3>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4 login-flex-display">
<button type="submit" class="btn btn-success right-margin-button" ng-click="login.signIn(login.credentials)"
ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Login
</button>
<button type="submit" class="btn btn-success" ng-click="login.signUp(login.credentials)"
ng-disabled="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid || sign.credentials.email.$invalid">Register
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h5 class="alert check-login white error-blue" ng-show="sign.credentials.email.$invalid">Email is not valid</h5>
</div>
<div class="col-md-6">
<h5 class="alert check-login white error-blue" ng-show="sign.credentials.password.$error.minlength || sign.credentials.password.$invalid">Password must be atleast 6 digits</h5>
</div>
</div>
</form>
The routes.login.js :
import template from './login.html';
routes.$inject = ['$stateProvider'];
export default function routes($stateProvider) {
$stateProvider
.state('login', {
url: '/Login',
template: template,
controller: 'LoginController',
controllerAs: 'login'
});
}
The login controller :
import {createUser} from '../../api/usersApi';
export default class LoginController {
constructor($location, authentication) {
this.location = $location;
this.authentication = authentication;
this.error = '';
}
}
LoginController.$inject = ['$location', 'authentication'];
Thx for the help guys. hope you have any idea how to solve it out.
i think its related to the "sign" and to controller as name "login"
But i still didn't figure it out.
try to change ng-show="login.error" to ng-show="login.sign.error" angular bind the the error to the name of the form
I hope this helped you.
I have a submit button on my form but for some weird reason it requires me to click on the button twice before it calls the save function underneth, I am using Pug for my HTML
Here is my HTML template:
<form ng-submit="save()">
<div class="form-group">
<div class="row">
<div class="col col-md-6">
<ol ng-model="service.category" title="Select a category" class="nya-bs-select">
<li nya-bs-option="category in categories.rows" class="nya-bs-option"><a> <span>{{category.name}} </span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ol>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col col-md-6">
<div class="input-group"><span class="input-group-addon">Service Name</span>
<input type="text" ng-model="service.name" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col col-md-6">
<textarea ng-model="service.description" placeholder="Service Description" rows="10" class="form-control"></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col col-md-6">
<button type="submit" value="Save" class="btn btn-default"> Save</button>
</div>
</div>
</div>
</form>
The save function called is as
angular.module('App.controllers')
.controller('UpdateServiceCtrl', [
'$scope', '$state', 'ServicesService', 'Notification',
function ($scope, $state, ServicesService, Notification) {
$scope.service = $scope.$parent.service;
$scope.categories = $scope.$parent.categories;
/**
* Edits a service
* #param {integer} serviceID Id of the service to be edited
* #return {undefined} Does not return any values
*/
$scope.save = function () {
$scope.service.category_id = $scope.service.category.id;
ServicesService.save($scope.service, $scope.service.id)
.then(function (result) {
$state.reload();
})
}
}]);
You can disable the submit button after it clicked first time using
ng-disabled='isButtonEnabled' your html.
Modify your save like this
$scope.save = function () {
$scope.isButtonEnabled = false;
$scope.service.category_id = $scope.service.category.id;
ServicesService.save($scope.service, $scope.service.id)
.then(function (result) {
$state.reload();
})
}
Let me know if it doesn't works.
I have the following html:
<div ng-repeat="email in user.emails" class="form-group">
<label for="inputEmail_{{$index+1}}" class="col-lg-2 control-label">Email {{$index+1}}</label>
<div class="col-lg-8 col-xs-11">
<input type="email" class="form-control" id="inputEmail_{{$index+1}}" name="inputEmail_{{$index+1}}" placeholder="Email" required>
</div>
<div ng-if="$index == 0" class="col-lg-1 col-xs-1">
<button type="button" class="btn btn-info addEmailBtn" ng-click="addEmailInput()">
<i class="fa fa-plus"></i>
</button>
</div>
<div ng-if="$index != 0" class="col-lg-1 col-xs-1">
<button type="button" class="btn btn-danger" ng-click="removeEmailInput($index)">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
And my controller is:
module.controller('NewContactCtrl',
function EditProfileController($scope) {
$scope.user = {
emails: [
{ emailValue: "" }
]
};
$scope.addEmailInput = function () {
$scope.user.emails.push({ emailValue: "" });
};
$scope.removeEmailInput = function (index) {
$scope.user.emails.splice(index, 1);
};
});
And for some reason SOMETIMES when I click .addEmailBtn, the click event gets fired twice so I get two new elements instead of one.
EDIT You can reproduce problem here:
http://jsbin.com/qiwehiwico/1/edit?html,js,output
I'm trying to load a modal with Angular and then fill it with a template.
The problem is that the inputs are overshooting the modal - here is a screenshot of the problem:
Here is the code for the modal instantiation:
$scope.logInOpen = function () {
console.log($modal);
var modalInstance = $modal.open({
templateUrl: '../views/login.html',
controller: 'AuthController',
size: 'sm'
});
modalInstance.result.then(function () {
console.log($scope.modalInstance);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
$scope.modalInstance = null;
});
}
and here is the /view/login.html
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-2">
<form ng-submit="logIn()" style="margin-top:30px;">
<h3>Log In</h3>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="Email"
ng-model="user.username"></input>
</div>
<div class="form-group">
<input type="password"
class="form-control"
placeholder="Password"
ng-model="user.password"></input>
</div>
<button type="submit" class="btn btn-success">Log In</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<span ><small> Forgot Password</small></span>
</form>
<div class="row">
<div ng-show="error" class="alert alert-danger">
<span>{{ error.message }}</span>
</div>
</div>
</br><br>
</div><!-- closes .col-md-6 -->
</div><!-- closes .row -->
</div><!-- closes .container -->
It's because you have them in a modal - in a .container. Try removing the .container class from the modal.
.container has static widths and not percentages. This is why it's overflowing.
I have created 2 ng-model called "nieuweDatum" and "nieuwOnderwerp" in this view:
**<div ng-controller="VergaderingCtrl">
<form ng-submit="addVergadering()">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" ng-model="nieuweDatum" size="25" placeholder="Nieuwe vergaderdatum" class="form-control">
<span class="input-group-btn"><button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-plus" /></button></span>
</div>
</div>
</div>
</form>
<accordion close-others="true">
<accordion-group ng-repeat="vergadering in vergaderingen">
<accordion-heading>
<accordion-paneltitle>Vergaderdatum: {{vergadering.Datum | date:'fullDate'}}</accordion-paneltitle> <span class="glyphicon glyphicon-trash pull-right" ng-click="deleteVergadering(vergadering)"></span>
</accordion-heading>
<ul class="list-group" ng-repeat="onderwerp in vergadering.Onderwerpen">
<li class="list-group-item">{{onderwerp.Omschrijving}}</li>
</ul>
<form ng-submit="addOnderwerp(vergadering)">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<input type="text" ng-model="nieuwOnderwerp" size="25" placeholder="Nieuw onderwerp" class="form-control">
<span class="input-group-btn"><button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-plus" /></button></span>
</div>
</div>
</div>
</form>
</accordion-group>
</accordion>
</div>**
In the controllercode i can use nieuweDatum by referencing it with "$scope.nieuwDatum", but "scope.nieuwOnderwerp" is undefined...
In this controller i disovered that the value is present in "this.nieuwOnderwerp" ( in the addOnderwerp function). Can anyone tell me where i am going wrong?
I'm a newby in Angular (obviously) so any suggestions for further study are welcome!
var collegeApp = angular.module('collegeApp', ['ui.bootstrap']);
collegeApp.controller('VergaderingCtrl', function($scope, $http) {
$http.get('http://localhost:7286/api/vergaderingen')
.then(function (res) {
$scope.vergaderingen = res.data;
});
$scope.addVergadering = function () {
$http.post('http://localhost:7286/api/vergaderingen', { Datum: $scope.nieuweDatum, Status: 2 })
.success(function (item) {
$scope.vergaderingen.push(item);
$scope.nieuweDatum = '';
})
.error(function () {
alert("Fout bij het opslaan!") });
};
$scope.addOnderwerp = function (item) {
var index = $scope.vergaderingen.indexOf(item)
$scope.vergaderingen[index].Onderwerpen.push({ Omschrijving: this.nieuwOnderwerp });
this.nieuwOnderwerp = '';
};
$scope.deleteVergadering = function (item) {
$http.delete('http://localhost:7286/api/vergaderingen/' + item.Id)
.success(function () {
var index = $scope.vergaderingen.indexOf(item)
$scope.vergaderingen.splice(index, 1);
})
.error(function () {
alert("Fout bij het verwijderen!");
});
};
});