I have done a lot to fix this, but it's not working. I am using Ionic's searchbar.
My input field gets the class ng-empty when nothing is filled in (so this is the default state). The input field gets a ng-not-empty class when it's filled in.
So, I could fix this with jQuery or something, but I saw that Angular has ways to do this. This is the HTML:
<ion-view view-title="Testing">
<ion-header-bar align-title="center" class="bar">
</ion-header-bar>
<ion-content class="scrollBar">
<ion-searchbar class="searchBar" ng-app="myApp">
<label>
<input class="searchField" type="search" ng-model="itemsSearch"/>
<a class="clear" data-ng-click="saveParentComment()">X</a>
<i class="icon ion-search placeholder-icon"></i>
</label>
</ion-searchbar>
</ion-content>
</ion-view>
I've added this to my controller:
myApp.controller('SearchController', function ($http, $scope, $state) {
$scope.saveParentComment = function () {
$scope.itemsSearch = "";
};
Yet, this is not working and I don't get why. Am I doing something wrong? If so, how can I fix it? I have seen a lot of questions regarding this one, but no answer worked for me. I don't see any errors in the console either...
The only thing I see, is that the anchor gets a new class "activated" when I click on it.
In the angular,every directive create new scope.
itemsSearch is bind to the directive scope and its not visible to controller.
Use it as part of object defined on $scope in controller.
myApp.controller('SearchController', function ($http, $scope, $state) {
$scope.objItem = {itemsSearch : ""};
$scope.saveParentComment = function () {
$scope.objItem.itemsSearch = "";
};
HTML :
<input class="searchField" type="search" ng-model="objItem.itemsSearch"/>
Try this out :-
<input type="text" class="form-control" data-ng-model="searchAll"></input>
<a class="clear" href="" data-ng-click="clearSearch()">X</a>
app.controller("SearchController", function ($scope) {
$scope.searchAll = "";
$scope.clearSearch = function () {
$scope.searchAll = "";
};
});
I don't see anywhere in your view you have put SearchController Also ng-model should work with a dot operator
Try,
<ion-view view-title="Testing" ng-app="myApp" ng-controller="SearchController">
<ion-header-bar align-title="center" class="bar">
</ion-header-bar>
<ion-content class="scrollBar">
<ion-searchbar class="searchBar">
<label>
<input class="searchField" type="search" ng-model="myObj.itemsSearch"/>
<a class="clear" data-ng-click="saveParentComment()">X</a>
<i class="icon ion-search placeholder-icon"></i>
</label>
</ion-searchbar>
</ion-content>
</ion-view>
In controller:
myApp.controller('SearchController', function ($http, $scope, $state) {
$scope.myObj = {};
$scope.saveParentComment = function () {
$scope.myObj.itemsSearch = "";
};
Can you please make sure that you put SearchController,
Can you please try with this
<ion-view view-title="Testing" ng-app="myApp" ng-controller="SearchController">
<ion-header-bar align-title="center" class="bar">
</ion-header-bar>
<ion-content class="scrollBar">
<ion-searchbar class="searchBar">
<label>
<input class="searchField" type="search" ng-model="itemsSearch"/>
<a class="clear" data-ng-click="saveParentComment()">X</a>
<i class="icon ion-search placeholder-icon"></i>
</label>
</ion-searchbar>
</ion-content>
And Function:
$scope.saveParentComment = function () {
console.log("clear");
$scope.itemsSearch = null;
};
If you see clear in console log than you are sure that your function is working fine. And you can set initial value also in controller like for itemSearch like.
$scope.itemsSearch = "Search Here";
I think there is a problem with your controller. First try in console for function is working or not
$scope.saveParentComment = function () {
console.log("working");
};
Related
I am using angularjs and spring mvc for my application. At first I am displaying all the placements with one button Placed Candidates. I am doing ng-repeat for displaying all the placements.
Here is my html.
<div class="row" data-ng-repeat="placement in placements">
<div class="col-xs-12 col-sm-12 col-md-12">
<h5>{{placement.companyName}}</h5>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<h6>{{placement.placementDate | date:'dd MMM yyyy'}}</h6>
Company Target (appox):10 Achieved:
</div>
<a href="javascript:void(0);" data-ng-
click="placedcandidatespopup(placement.placementId);">//here i can
get particular placementId but how to pass this id to
savePlacementStudents() method in controller.js???//
PlacedCandidates
</a>
</div>
I am calling one modal popup function. Here is controller.js
$scope.placedcandidatespopup = function()
{
AdminUsersService.getAllUsers().then(function(response)
{
$scope.allusers=response.data;
console.log($scope.allusers);
})
$(".placedcandidates").modal("show");
}
I am calling modal by name "placedcandidates".
Here is the modal
<div class="modal right fade placedcandidates" id="myModal1"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6" data-ng-
repeat="student in allusers">
<input id="{{student.studentId}}" type="checkbox" value="
{{student.studentId}}" data-ng-
checked="selection.indexOf(student.studentId) >-1"
data-ng-click="toggleSelection(student.studentId)"/>
<label for="{{student.studentId}}"></label>
{{student.firstName}}
</div>
</div>
</div>
<div class="modal-footer" style="position: fixed;">
<input type="button" value="Submit" class="btn" data-ng-
click="savePlacementStudents()">
</div>
</div>
</div>
</div>
After clicking on button popup modal will display with all Students with checkboxes placed beside them.Now I am able to save studentId into database.But I am not able to pass placementId for saving.
Here is my savePlacementStudents method in controller.js.
$scope.selectedStudents = {};
$scope.savePlacementStudents = function(selectedStudents)
{
selectedStudents.selectedList = $scope.selection;
AdminPlacementService.savePlacementStudents(selectedStudents).then
(function(response)
{
if(response.data=="success"){
$window.scrollTo(0,0);
$scope.selectedStudents = {};
$scope.getplacementdetails($scope.currentPageIndex);
$scope.successmessage="Student Selection Saved!;
$timeout(function() {
$scope.successmessage="";
$scope.closeplacedcandidatespopup();
}, 1500);
}
});
}
Can anyone tell how can I pass respective placementId to this saveStudents method() so that I can set that placementId for those students selected.
Here is the solution.
The placementId passed to function placedcandidatespopup can be saved as follows in function placedcandidatespopup
$scope.selectedPlacementId = placementId;
Now the same $scope will have access in Popup also as it is using same controller.js. And now you can use this $scope.selectedPlacementId anywhere in controller.js
So you don't need to pass placementId...!!
Hope that would help you..!!
$scope.placedcandidatespopup = function(id)
{
AdminUsersService.getAllUsers().then(function(response)
{
$scope.allusers=response.data;
console.log($scope.allusers);
})
$scope.inserted = {
placementId:id,
};
var modalInstance = $uibModal.open({
templateUrl: 'views/test/myModal1.html',
controller: 'TestCntrl',
size: "Modelwidth",
resolve: {
items: function () {
return $scope.inserted;
}
}
});
}
In model you have to access using items.placementId and when you savePlacementStudents() method send placementId as well with student info.
Update:
Using ng-include height is 0. I've provided a totally simplified example below. I need to know how to fix this and make it so the page says Hello.
<ion-view title="Page">
<ion-content padding="true" class="has-header">
<div ng-include="'templates/page30'"></div>
</ion-content>
</ion-view>
Where the templates/page30 file is
<p>Hello</p>
Original Post:
I need to figure out how to get my ng-include to be shown within an ng-switch. Currently the code does not work. Two things aren't happening as expected. The outer button is way small and the ng-included sub-forms are not showing as their height is 0. Please keep in mind I am using Ionic which means I do not have access to *.height().
NOTE: I'm only showing step 1 of the ng-switch otherwise this would be too bulky.
<ion-view title="Some Template" hide-nav-bar="true">
<ion-content padding="true" class="has-header">
<div ng-controller="someCtrl">
<ng-switch on="step">
<div ng-switch-when="1">
<div height-bind height-value="containerHeight">
<ng-include src="'templates/somepage.html'"></ng-include>
</div>
</div>
</ng-switch>
</div>
</ion-content>
</ion-view>
I have built a directive that looks like the following:
llApp.directive('heightBind', function() {
return {
scope: {
heightValue: '='
},
link: function($scope, $element) {
$scope.$watch(function() {
$scope.heightValue = $element.prop('offsetHeight');
});
}
}
});
The template called by ng-include is the following:
<ion-view title="Services" hide-nav-bar="true">
<ion-content padding="true" class="has-header">
<div class="page-header">
<h1>
<span>Lawncare</span>Services</h1>
</div>
<ul class="list">
<li class="item item-checkbox">
Mow Lawn
<label class="checkbox">
<input type="checkbox">
</label>
</li>
<li class="item item-checkbox">
Trim Plants
<label class="checkbox">
<input type="checkbox">
</label>
</li>
</ul>
</ion-content>
</ion-view>
One last thing. The controller someCtrl looks like the following: (actual controller reference is missing because I'm currently working within ionic creator)
function($scope, $stateParams) {
// Set the step initially to 1 every time this controllwer is instantiated.
// Usually on ng-switch button update the
// step value via the setStep function provided
$scope.step = 1;
$scope.setStep = function(step) {
$scope.step = step;
}
$scope.containerHeight = 0;
}
Some of the other things I've looked at to solve this. I have looked at:
http://stackoverflow.com/questions/25108780/height-of-container-with-ng-repeat-directive-is-zero
As well as this plunker:
Plunker
You are setting the height to 0 in the controller:
$scope.containerHeight = 0;
I am trying to use a simple input that can be retrieved by a cookie automatically.
My angular controller is :
<script>
var app = angular.module('mantis', ['ngCookies']);
app.controller('main', function($scope, $cookies) {
$scope.nom = '';
$scope.WriteNom = function () {
$cookies.put('Nom', $scope.nom);
};
$scope.ReadNom = function () {
$scope.nom = $cookies.get('Nom');
return $scope.nom;
};
});
</script>
In my page, I made a div where I can change the variable "nom" flawlessly.
The value should be loaded with ng-init (from cookie)
It changes with ng-model
And it should be saved with ng-click
<div class="container" ng-app="mantis" ng-controller="main">
<!-- Assigné à -->
<div class="col-lg-12">
<div class="input-group" ng-init="nom=ReadNom()">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="nom" type="text" class="form-control" name="nom" placeholder="Assigné à (id)" ng-model="nom">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" ng-click="WriteNom()">Sauvegarder</button>
</span>
</div>
</div>
(...)
And then, somewhere else, i can use "nom" where I need it by using {{nom}}
It's almost working :
The value is properly changed when I type in the input box and I can use it
The cookie is not changed when I click on the button nor it's loaded when I load the page
Remove the return part,
HTML:
<div class="input-group" ng-init="ReadNom()">
Controller:
$scope.ReadNom = function () {
$scope.nom = $cookies.get('Nom');
};
DEMO
I have a simple text box and a button and whenever user click on button the alert shows the text of textbox but I want to do it this way(I know there are a lot better ways but first I want to understand why this way does not work):
var app = angular.module('app', []);
app.factory('Service', function() {
var service = {
add: add
};
return service;
function add($scope) {
alert($scope.user.username);
}
});
app.controller('table', function(Service,$scope) {
//get the return data from getData funtion in factory
this.add = Service.add($scope);
});
As you can see I send the scope to factory and I define the user.username as follow:
<button class="btn btn-primary" ng-click="t.add(user.userName)">
But when I run this nothing happens can anyone tell me what is wrong with this code?
<body ng-app="app">
<form>
<div class="row commonRow" ng-controller="table as t">
<div class="col-xs-1 text-right">item:</div>
<div class="col-lg-6 text-right">
<input id="txt" type="text" style="width: 100%;"
ng-model="user.userName">
</div>
<div class="col-xs-2">
<button class="btn btn-primary" ng-click="t.add(user.userName)">
click me</button>
</div>
</div>
</form>
also the plnk link is as follow:
plnkr
The problem is in this line
this.add = Service.add($scope);
Here you are assigning the returned (which is undefined) value of the Service.add($scope) invocation to the this.add.
The right approach will be either
this.add = function(data) { Service.add($scope); }
or
this.add = Service.add;
// in the service factory.
function add(usrNm) {
alert(usrNm);
}
The first thing is you can't use $scope in a service.and in controller your not assaining this(object) to $scope.so $scope doesn't contain any value.
I suppose you to write like this
$scope.user = this;
What I'am trying to do is convert every user input into a label using angular. I believe that I'am doing the right thing, but is not working. I will appreciate if somebody take a look at this code. Thank you
here is a plunker
<div class="row" ng-controller="tagForm">
<div ng-click="addEntry()">
<div class="col-xs-12 col-sm-12 col-md-10 ">
<input type="text" placeholder="What are your area of expertise" ng-model="newEntry.name" class="form-control border" />
</div>
<div class="col-xs-12 col-md-2 center form-button">
<input type="button" value="Add" class="btn btn-orange btn-add" />
</div>
<div class="col-md-8 col-sm-offset-2" id="up">
<br />
<span class="label label-primary" ng-repeat="entry in entries">{{entry.name}}</span>
</div>
</div>
</div>
app.controller('tagForm', ['$scope', function($scope) {
return $scope.addEntry = function() {
$scope.entries.push($scope.newEntry);
return $scope.newEntry = {};
};
}]);
You have a few things wrong in your Plunk, but here's some stuff to start with:
You need to wire up a click event on your Add button. Right now, its not doing anything when you click it
Bind to an ng-model on the scope just using 'newEntry'. All you're typing is a name so thats all you need to save on the scope.
Loop over entries, printing out just 'entry' instead of 'entry.name'
And your controller should look like this (no need for the returns)
app.controller('tagForm', ['$scope', function($scope) {
$scope.entries = [];
$scope.addEntry = function() {
$scope.entries.push($scope.newEntry);
};
}]);
See this fiddle:
http://jsfiddle.net/smaye81/anrv2qms/1/