cy.on('tap', 'edge,:selected', function (event) {
$scope.$apply(function (response) {
$scope.dataToDisplay = {
data1:true
}
});
});
I have the following code above. It is an event that fires as any edge is clicked/tapped on in a Cytoscape.js graph.
I am able to display the $scope object utilizing $scope.$apply. In the html, I also have an ng-class directive that will display accordingly whether it's true/false. However, the ng-class does not seem to respond as the value changes.
Below is a snippet of the ng-class directive,
<div ng-if="dataToDisplay">
<div class="panel" ng-class="{'panel-danger': dataToDisplay.data1, 'panel-default': !dataToDisplay.data1}">
<div>
</div>
Assistance is much appreciated.
I would like to clarify that the class does get updated as the page loads. However, I have an additional ng-click event that toggles the true/false. This does not add/remove the class as the value change but the value does get updated in the view. How can I achieve update the class as the value changes?
Related
I'm using angular-material and I have an md-switch item whose model is being set based on the value in a JS object. The challenge I'm having is, when the user clicks the switch, I don't want to change the object value directly - instead, I want to execute a function that is in the object that changes the value for me.
In the code (or JSFiddle below) you can see that the toggle state never changes.
This is a trivial example, so it doesn't go into the reason why, but is something like this possible?
Here is sample code
HTML
<div class="inset switchdemoBasicUsage" ng-controller="SwitchDemoCtrl" ng-cloak="" ng-app="MyApp">
<md-switch ng-model="data.state" aria-label="Switch 2" class="md-primary" ng-change="data.change()">
{{ data.state }}
</md-switch>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('SwitchDemoCtrl', function($scope) {
$scope.data = {
state: true,
change: function() {
this.state = !this.state;
}
};
});
Here is the link to the JSFiddle: http://jsfiddle.net/wx8s709z/
The problem is not that it never changes but you changes it two times.
First time it changes when you click and second time you change it by your function. So if you comment your code into call function you'll see that all works.
ng-change is event that indicates you that your value is changed and then you can call another function with it's value, using only $scope.data.state
I have a controller which prints some data in a ul using a ng-repeat. Each li is divided in two parts:
<li>
<div>
<button type="button" class="some classes" ng-show="!field.edit.state" ng-click="field.edit.update(true)">Edit</button>
<button type="button" class="some classes" ng-show="field.edit.state" ng-click="field.edit.update(false)">Save</button>
{{field.title}}
</div>
<div ng-show="field.edit.state">
<input />
</div>
The idea is, when the "Edit" button is clicked the input field and the "Save" button are shown, while the "Edit" button itself is hidden. Clicking on the "Save" button goes on the other way around. Since I need to execute some functions on the start and the end of the editing the update also triggers some callbacks from my controller. Now, the callbacks are correcly triggered, the state is updated, but nothing changes on my page.
The update function code is pretty simple:
function registerEdit(callback){
var state = false;
var update = function(newState){
state = newState;
callback(newState)
$timeout(function(){
$scope.$apply()
})
}
return {
state : state,
update : update
}
}
Each field element is injected its own registerEdit property when the data are fetched from the server and injected in the $scope, so they are unique (I've checked that part, and it works). From what I know about Angular, after changing the $scope all I needed to do was to call the $apply function to have Angular change my view, but even as the state changes (I logged it) the display remains the same.
I have an input in my view:
<label for="map-latitude_input">Latitude {{mapLatitudeInput}}</label>
<input
type="text"
placeholder="00.000"
[(ngModel)]="mapLatitudeInput"
[ngFormControl]="newListingForm.find('mapLatitudeInput')"
id="map-latitude_input"
class="transparent">
and inside my controller I am listening to map drag event from google maps api. On drag I want to update value inside my input and in its associated label. At the moment this looks like this:
//Update coordinates on map drag
map.addListener('drag', (event) => {
this.mapLatitudeInput = map.getCenter().lat();
console.log(this.mapLatitudeInput);
});
Now when I drag a map console keeps outputting correct value as I move it around, however in my view it stays exactly the same. What I also noticed is that if I drag map around and than do some action like select an option in select menu within same form that my input is in, it updates mapLatitudeInput to correct value, i'm not sure why this happens, but thought I'd mention it.
It's perhaps due to ZoneJS. This question could give you some hints: View is not updated on change in Angular2.
From where do you get your map instance. If it's instantiated outside a zone, Angular2 won't be able to detect updates of the mapLatitudeInput attribute.
You could try something like that:
export class MapComponent {
constructor(ngZone:NgZone) {
this.ngZone = ngZone;
}
map.addListener('drag', (event) => {
this.ngZone.run(() =>
this.mapLatitudeInput = map.getCenter().lat();
console.log(this.mapLatitudeInput);
});
});
This question could be also related to your problem: Angular2 child property change not firing update on bound property.
Hope it helps you,
Thierry
I'm trying to do a search with product results using AngularJS. I've obtained an JSON object with my results": example below
[{"store_id":"17","user_id":"29","company_name":"Liquor R Us","company_type":"Alcohol",
"phone":"(303) 555-5555","website":"http:\/\/liqourrus.com","address":"5501 Peoria St",
"address_2":"","city":"Denver","state":"CO","zip":"80239","lat":"39.796181",
"lng":"-104.84863","mon_open":"","mon_close":"","tues_open":"","tues_close":"",
"wed_open":"","wed_close":"","thurs_open":"","thurs_close":"","fri_open":"","fri_close":"",
"sat_open":"","sat_close":"","sun_open":"","sun_close":"","distance":"1.1668156112981596",
"s":"s","st":"Every Store"}]
I'm using ng-repeat="store in storeResult" and the results will not display until I click on my Filter function, please note the filter is not applied!
<div class="product" ng-repeat="store in storeResult">
{{store.company_name}}
</div>
ng-click="setFilter('all');"
$scope.setFilter = function(filter) {
if(filter == 'all') {
$scope.searchProduct.product_type = '';
$scope.searchStore.company_type = '';
}
}
If I click the "setFilter" button, all results show. I'm trying to figure out how to make it display without having to click the button.
This work around only works in Chrome. Firefox and IE, never display results.
Plunker: link
My best guest is that by clicking the setFilter button you are triggering a digest cycle and your ngRepeat will be executed because of that. I suspect that you are assigning your storeResult outside the digest cycle and that's the reason is not displaying initially. I cannot tell for sure because is not in your description how is that JSON assigned to your storeAssignment .
Can you check how is that variable assigned?
Can you change the way it's and do this:
$timeout(function() {
$scope.storeAssignment = _your_json_value;
});
You will have to include the $timeout dependency but with this, a change in storeAssignment will be inside your digest cycle and the ngRepeat will see that change.
Hope that helps.
It looks like you're not setting the filter to 'all' until you click the filter function. Make sure that filter starts out as 'all'.
I'm using ng-show to show a div upon clicking a button.
The div I'm ng-show-ing contains a course schedule with dynamically updated courses as the user clicks around and adds courses.
But when this course schedule gets triggered to show, it is in a stale state. There are no courses appearing.
Any insight onto why all the added courses data is not actually showing? Is there something special that has to be done after ng-show to refresh the state of the data?
HTML:
<div id="schedule-div" ui-calendar="uiConfig.calendar" ng-model="eventSources" ng-show="scheduleMode" calendar="weekView"></div>
JS:
// Event handle for "Generate Schedule" button
$scope.getSchedules = function () {
scheduleFactory.getSchedules($rootScope.addedCourses).
success(function (data) {
var scheduleListing = angular.fromJson(data);
// Create closure with current scheduleListing
scheduleInstance = renderSchedule(scheduleListing);
scheduleInstance(0);
// $scope.events is the data used
// This log correctly, logs data
console.log($scope.events);
// Toggle the ng-show
$scope.scheduleMode = true;
}).
error(function() {
$window.alert("Schedules not found.");
});
};
As you can see this is all happening in a callback from the server (I don't think this should matter though). The console.log() shows the data correctly so the data does exist by the time the ng-show is toggled.
When the ng-show logic is completely removed the data is correctly updated in the schedule view. So the problem must lie somewhere in ng-show displaying a stale state.
Check your data source. ng-show doesn't care about the content. It just make the container display:none or display:block based on the condition.
Your datasource is not getting updated.
If you have any example than post.
after code
// Toggle the ng-show
$scope.scheduleMode = true;
add
$scope.apply()
You're using ng-model=eventSources to set your data in the schedule listing. It doesn't appear to be updated, as the variable eventSources isn't being used in your getSchedules() code. That controls what get's updated inside the div.
ng-show only shows or hides the div, doesn't control anything else inside of it.