There are two attributes selCountry and searchText. There is a watch that monitors these two variables. The 1st one is bound to a select element, other is a input text field.
The behavior I expect is: If I change the dropdown value, textbox should clear out, and vice versa. However, due to the way I have written the watch, the first ever key press (post interacting with select element) swallows the keypress.
There must be some angular way of telling angular not to process the variable changes happening to those variables; yet still allow their changes to propagate to the view...?
$scope.$watchCollection('[selCountry, searchText]', function(newValues, oldValues, scope){
console.log(newValues, oldValues, scope.selCountry, scope.searchText);
var newVal;
if(newValues[0] !== oldValues[0]) {
console.log('1');
newVal = newValues[0];
scope.searchText = '';
}
else if(newValues[1] !== oldValues[1]) {
console.log('2');
newVal = newValues[1];
scope.selCountry = '';
}
$scope.search = newVal;
var count = 0;
if(records)
records.forEach(function(o){
if(o.Country.toLowerCase().indexOf(newVal.toLowerCase())) count++;
});
$scope.matches = count;
});
Plunk
I think the problem you are encountering is that you capture a watch event correctly, but when you change the value of the second variable, it is also captured by the watchCollection handler and clears out that value as well. For instance:
selCountry = 'Mexico'
You then change
selText = 'City'
The code captures the selText change as you'd expect. It continues to clear out selCountry. But since you change the value of selCountry on the scope object, doing that also invokes watchCollection which then says "okay I need to now clear out searchText".
You should be able to fix this by capturing changes using onChange event handlers using ng-change directive. Try the following
// Comment out/remove current watchCollection handler.
// Add the following in JS file
$scope.searchTextChange = function(){
$scope.selCountry = '';
$scope.search = $scope.searchText;
search($scope.search);
};
$scope.selectCountryChange = function(){
$scope.searchText = '';
$scope.search = $scope.selCountry;
search($scope.search);
};
function search(value){
var count = 0;
if(records)
records.forEach(function(o){
if(o.Country.toLowerCase().indexOf(value.toLowerCase())) count++;
});
$scope.matches = count;
}
And in your HTML file
<!-- Add ng-change to each element as I have below -->
<select ng-options="country for country in countries" ng-model="selCountry" ng-change="selectCountryChange()">
<option value="">--select--</option>
</select>
<input type="text" ng-model="searchText" ng-change="searchTextChange()"/>
New plunker: http://plnkr.co/edit/xCWxSM3RxsfZiQBY76L6?p=preview
I think you are pushing it too hard, so to speak. You'd do just fine with less complexity and watches.
I'd suggest you utilize some 3rd party library such as lodash the make array/object manipulation easier. Try this plunker http://plnkr.co/edit/YcYh8M, I think it does what you are looking for.
It'll clear the search text every time country item is selected but also filters the options automatically to match the search text when something is typed in.
HTML template
<div ng-controller="MainCtrl">
<select ng-options="country for country in countries"
ng-model="selected"
ng-change="search = null; searched();">
<option value="">--select--</option>
</select>
<input type="text"
placeholder="search here"
ng-model="search"
ng-change="selected = null; searched();">
<br>
<p>
searched: {{ search || 'null' }},
matches : {{ search ? countries.length : 'null' }}
</p>
</div>
JavaScript
angular.module('myapp',[])
.controller('MainCtrl', function($scope, $http) {
$http.get('http://www.w3schools.com/angular/customers.php').then(function(response){
$scope.allCountries = _.uniq(_.pluck(_.sortBy(response.data.records, 'Country'), 'Country'));
$scope.countries = $scope.allCountries;
});
$scope.searched = function() {
$scope.countries = $scope.allCountries;
if ($scope.search) {
var result = _.filter($scope.countries, function(country) {
return country.toLowerCase().indexOf($scope.search.toLowerCase()) != -1;
});
$scope.countries = result;
}
};
});
Related
I have the following controller
angular.module('publicApp')
.controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeout) {
$scope._url = "";
$scope._title = "";
$scope._article = "";
$scope._authors = "";
$scope._highlights = [];
$scope._docType = "";
$scope.summarizeURL = function(){
Article.getArticleInfo($scope.url, "").then(
function(data){
$scope._url = data.url;
$scope._title = data.title;
$scope._authors = data.authors.join(', ');
$scope._highlights = data.highlights;
$scope._docType = data.documentType;
if($scope._docType == 'html'){
$scope._article = data.article[0].article;
}
else{
$scope._article = data.article;
}
var _highlights = [];
$scope._highlights.forEach(function (obj) {
_highlights.push(obj.sentence);
});
// wait for article text to render, then highlight
$timeout(function () {
$('#article').highlight(_highlights, { element: 'em', className: 'highlighted' });
}, 200);
}
);
}
and the following view
<form role="form" ng-submit="summarizeURL()">
<div class="form-group">
<input id="url" ng-model="url" class="form-control" placeholder="Enter URL" required>
</div>
<button class="btn btn-success" type="submit">Summarize</button>
</form>
<div class="col-lg-8">
<h2>{{ _title }}</h2>
<p> <b>Source: </b> {{_url}}</p>
<p> <b>Author: </b> {{_authors}} </p>
<p> <b>Article: </b><p id="article">{{_article}}</p></p>
</div>
When I give a url in the text field initially and click Summarize it works as expected. But when I change the value in the text field and click the button again every thing is updated properly, with the new values, but the $scope._article gets the new value and doesn't remove the old value. It displays both the new and the old value that was there before.
Why is this happening?
EDIT #1: I added more code that I had. I found that when I remove the $timeout(function(){...}) part it works as expected. So now the question is, why is $scope._article keeping the old value and pre-pending the new value?
EDIT #2: I found that $timeout(...) is not the problem. If I change
$timeout(function () {
$('#article').highlight(_highlights, { element: 'em', className: 'highlighted' });
}, 200);
to
$('#article').highlight(_highlights, { element: 'em', className: 'highlighted' });
it still behaves the same way. So now I'm assuming it's because I'm changing the $scope._article to be something else? What's happening is that I'm displaying the $scope._article value and then modifying what's displayed to contain highlights <em class='highlighed'> ... </em> on what ever I want to highlight.
EDIT #3: I tried to remove the added html before making the request to get new data but that doesn't work either. Here's the code I tried.
angular.module('publicApp')
.controller('URLSummaryCtrl', function ($scope, $location, Article, $rootScope, $timeout) {
$scope._url = "";
$scope._title = "";
$scope._article = "";
$scope._authors = "";
$scope._highlights = [];
$scope._docType = "";
$scope.summarizeURL = function(){
//Remove added html before making call to get new data
$('.highlighted').contents().unwrap();
Article.getArticleInfo($scope.url, "").then(
function(data){ ... }
);
Jquery in angular controllers = headache.
The problem is probably here for you
$timeout(function () {
$('#article').highlight(_highlights, { element: 'em', className: }, 200);
#article.html() here, is going to give weird output, because angular has it's own sync system and the jquery library you're using has it's own way of working with the DOM. Throw in the fact that asynchronous javascript is already a pain if you're working with multiple things.
What you want instead is to set the html to the angular scope variable before you work with it in jquery so you know what the jquery is working with, i.e.:
$timeout(function () {
$('#article').html($scope._article);
$('#article').highlight(_highlights, { element: 'em', className: }, 200);
I've created a small sample of what is happening.
http://plnkr.co/edit/py9T0g2aGhTXFnjvlCLF
Basically, the HTML is:
<div data-ng-app="app" data-ng-controller="main">
<select class="ui dropdown" id="ddlState" data-ng-options="s.name for s in states track by s.id" data-ng-model="selectedState"></select>
<select class="ui dropdown" id="ddlCity" data-ng-options="c.name for c in cities track by c.id" data-ng-model="selectedCity"></select>
</div>
And the javascript is:
angular.module("app", [])
.controller("main", function($scope, $timeout) {
$scope.selectedState = {id:1,name:"A"};
$scope.selectedCity = {id:1,name:"A.1",stateId:1};
$scope.states = [{id:1,name:"A"},{id:2,name:"B"},{id:3,name:"C"}];
var fakeDataSource = [
{id:1,name:"A.1",stateId:1},
{id:2,name:"A.2",stateId:1},
{id:3,name:"A.3",stateId:1},
{id:4,name:"B.1",stateId:2},
{id:5,name:"B.2",stateId:2},
{id:6,name:"B.3",stateId:2},
{id:7,name:"C.1",stateId:3},
{id:8,name:"C.2",stateId:3},
{id:9,name:"C.3",stateId:3}
];
$scope.$watch("selectedState", function(n,o){
if (n !== o)
$scope.selectedCity = null;
$scope.cities = fakeDataSource.filter(function(x){
return n.id === x.stateId;
});
$timeout(function(){
$(".ui.dropdown").dropdown().dropdown("refresh");
});
})
$timeout(function(){
$(".ui.dropdown").dropdown();
})
})
The problem is when I change the first dropdown to value 'B' or 'C', the value of second dropdown does not change, even it is changed in angular model.
You guys can notice that I've the line $(".ui.dropdown").dropdown().dropdown("refresh") to refresh the values but does not work.
I tried destroy and recreate using $(".ui.dropdown").dropdown("destroy").dropdown() but still does not work.
Any help?
Simply using ngModel won't make the values change dynamically. Take a look at the documentation here: https://docs.angularjs.org/api/ng/directive/ngModel
You can bind the values using ngBind or what I have done is do an onChange to then check the value and change your second drop down accordingly. Something like:
$("#ddlState").on("change", function(e) {
//check $scope.selectedState for it's value, and change #ddlCity/$scope.selectedCity accordingly
});
EDIT: It seems my issue is more complex than the simple typo in the code below. I have 3rd party components interacting and raising change events on the inputs which angular is picking up when I don't want it to. The problem is somewhere in there. I will try to find a simple fiddle and update the question if I manage it.
I have a pair of inputs, which have an ng-model and share an ng-change function. The ng-change sets a boolean value in the controller which is supposed to update the class(es) on the inputs through an ng-class directive. However the first of the two inputs never seems to get any updates to it's class. Here is a simplified version:
View:
<div ng-controller='TestCtrl'>
<input type="text" ng-class="{ 'invalid': firstInvalid }" ng-model="firstValue" ng-change="doOnChange()"></input>
<input type="text" ng-class="{ 'invalid': secondInvalid }" ng-model="secondValue" ng-change="doOnChange()"></input>
</div>
Controller:
function TestCtrl($scope) {
$scope.firstInvalid = false;
$scope.secondInvalid = false;
$scope.firstValue = '';
$scope.secondValue = '';
$scope.doOnChange = function () {
console.log('change fired');
$scope.firstInValid = !$scope.firstInvalid;
$scope.secondInvalid = !$scope.secondInvalid;
};
};
Codepen:
http://codepen.io/Samih/pen/ZGXQPJ
Notice how typing in either input, the second input updates with the class just as I would expect, however the first never gets the 'invalid' class.
Thanks in advance for your help.
Check your code for typos:
This line
$scope.firstInValid = !$scope.firstInvalid;
should be
$scope.firstInvalid = !$scope.firstInvalid;
It should be $scope.firstInvalid, not $scope.firstInValid.
It seems to work for me :
Just edited 'firstInvalid'.
View:
<div ng-controller='TestCtrl'>
<input type="text" ng-class="{ 'invalid': firstInvalid }" ng-model="firstValue" ng-change="doOnChange()"></input>
<input type="text" ng-class="{ 'invalid': secondInvalid }" ng-model="secondValue" ng-change="doOnChange()"></input>
</div>
Controller:
function TestCtrl($scope) {
$scope.firstInvalid = false;
$scope.secondInvalid = false;
$scope.firstValue = '';
$scope.secondValue = '';
$scope.doOnChange = function () {
console.log('change fired');
$scope.firstInvalid = !$scope.firstInvalid;
$scope.secondInvalid = !$scope.secondInvalid;
};
};
Codepen: http://codepen.io/vikashverma/pen/BNwKmQ
I have a cascading select with 2nd dropdown appears based on the first dropdown selection. An extra blank option appears which is not part of intended behaviour of the dropdown.
<select ng-init="order.attempt_status_sub = order.attempt_status_sub || subStatuses[0].name"
data-ng-model="order.attempt_status_sub" ng-options="subStatus.name as
subStatus.name for subStatus in subStatuses">
</select>
How do I avoid empty extra select from appearing in dropdown?
code for my cascading dropdowns is
<div class="form-group" ng-class="{ 'has-error' : submitted && orderForm.content.$invalid}">
<div class="controls">
<select ng-change="getSubStatuses(order.attempt_status)" data-ng-model="order.attempt_status" ng-options="status.name as status.name for status in statuses">
</select>
</div>
</div>
<div class="form-group" ng-show="subStatuses.length" ng-class="{ 'has-error' : submitted && orderForm.content.$invalid}">
<div class="controls">
<select ng-init="order.attempt_status_sub = order.attempt_status_sub || subStatuses[0].name" data-ng-model="order.attempt_status_sub" ng-options="subStatus.name as subStatus.name for subStatus in subStatuses">
</select>
</div>
</div>
$scope.getSubStatuses = function(attempt_status) {
var statuses = $scope.statuses;
for(var index in statuses) {
if(statuses[index].name === attempt_status) {
if(statuses[index].children) {
$scope.subStatuses = statuses[index].children;
} else {
$scope.subStatuses = [];
}
break;
}
}
};
I am assuming you are setting this for an asynchronously bound data. ng-init is really bad for this purpose. Thumb rule is do not use ng-init for something which controller is supposed to do. You should set up your view model in the controller. The reason why it could fail when the data is bound asynchronously is because ng-init'ed expression is not watched. So it just runs once during the first rendering and the subStatuses is not yet populated and it falls back to showing the default empty option. And even if the data is populated and view is updated during the later digest cycle ng-init expression does not run again.
From Doc
The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
So just initialize it in your controller, instead of using ng-init.
$scope.getSubStatuses = function(attempt_status) {
var statuses = $scope.statuses;
for(var index in statuses) {
if(statuses[index].name === attempt_status) {
if(statuses[index].children) {
$scope.subStatuses = statuses[index].children;
} else {
$scope.subStatuses = [];
}
break;
}
}
//Initialize the model here, assuming $scope.order is already initialized
$scope.order.attempt_status_sub = ($scope.subStatuses[0] ||{}).name;
};
angular.module('app', []).controller('ctrl', function($scope, $timeout) {
$timeout(function() {
$scope.subStatuses = [{
name: 'test1'
}, {
name: 'test2'
}, {
name: 'test3'
}];
$scope.order = {
attempt_status_sub1: $scope.subStatuses[0].name
};
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
With Ng-Init
<select ng-init="order.attempt_status_sub = order.attempt_status_sub || subStatuses[0].name" data-ng-model="order.attempt_status_sub" ng-options="subStatus.name as
subStatus.name for subStatus in subStatuses">
</select>
With controller initialization.
<select data-ng-model="order.attempt_status_sub1" ng-options="subStatus.name as
subStatus.name for subStatus in subStatuses">
</select>
</div>
I have 2 forms - a billing and a shipping. If the user checks a checkbox, the shipping address should be populated with the billing address and turn disabled. If the user unchecks the box, the shipping address should be blank and return to enabled.
I have this working right now with $watch but it feels hacky. I have 2 $watches nested in eachother watching the same element. I want to know if there is a better way to achieve what I am doing.
I tried using a ternary operator in the ng-model like below but that didn't work either.
<input ng-model="isSameAsBilling ? billName : shipName" ng-disabled="isSameAsBilling" />
A plunkr of my "working" code
HTML:
<input ng-model="billName" />
<input type="checkbox" ng-checked="isSameAsBilling" ng-click="sameAsBillingClicked()"/>
<input ng-model="shipName" ng-disabled="isSameAsBilling" />
JavaScript:
$scope.isSameAsBilling = false;
$scope.sameAsBillingClicked = function(){
$scope.isSameAsBilling = !$scope.isSameAsBilling;
};
$scope.$watch('isSameAsBilling', function(isSame){
if ($scope.isSameAsBilling) {
var shipNameWatcher = $scope.$watch('billName', function (newShipName) {
$scope.shipName = $scope.billName;
var secondBillWatcher = $scope.$watch('isSameAsBilling', function(isChecked){
if (!isChecked){
shipNameWatcher();
secondBillWatcher();
$scope.shipName = '';
}
});
});
}
});
I think I've finally got what you're after here.
When the checkbox is checked, it registers a $watch on the billName and mirrors it to the shipName.
When the checkbox is unchecked, the deregisters the $watch and clears the shipName
angular
.module('app', [])
.controller('appController', ['$scope', function($scope){
$scope.isSameAsBilling = false;
$scope.isSameChanged = function() {
if ($scope.isSameAsBilling) {
// register the watcher when checked
$scope.nameWatcher = $scope.$watch('billName', function(bName) {
$scope.shipName = bName
})
} else {
// deregister the watcher and clear the shipName when unchecked
$scope.nameWatcher();
$scope.shipName = ''
}
}
}]);
and here is the PLUNK