This is my div class.
<div class="panel-body relative" ng-attr-id="{{{{$parent.p.cameraId}}}}"></div>
How to replace the "string" of below codes with above ng-attr-id?
var target = document.getElementById('string');
do some code modification
<div class="panel-body relative" id='string' ng-attr-id="{{{{$parent.p.cameraId}}}}"></div>
id='string'
var target = document.getElementById('string').getAttribute('ng-attr-id');
See https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes
<div class="panel-body relative" ng-attr-id="{{$parent.p.cameraId}}"></div>
The value comes from your scope! and gets interpolated. You can't change the view when its already rendered. Because the output of your code will be something like:
<div class="panel-body relative" id="foo"></div>
So that attribute is not there anymore. You have to change your parent scope value. The parent you should be able to reach with a service or so. If you are new with developing and starting with AngularJS personally i would skip that ancient thing and move to Angular.
From your question i see that you want to change things according to the cameraId but then you should simply use views and not mix vanilla JavaScript with Angular.
Related
This is my first question in this forum. I had been using jquery for a while but now I recently shifted to vuejs and found it's awesome.
Here is a little hitch I am having. The problem is I have to set v-loading on buttons in a loop and when I click I need it to be true (i.e starts showing). This is how I have done it but I don't know how to trigger it.
<div class="col-sm-12" style="padding:0;" v-for="follow_request in follow_requests" v-loading.body="true">
<div class="col-sm-4">
<img class="img-circle" :src="follow_request.user.image | appendBaseUrl"
style="height:60px;"/>
</div>
</div>
v-loading.body="true"
I need to make it true and false on click, but only this specific div.
I typically suggest adding a property to the object that you are iterating over that represents the state. For each of the follow_request objects in your follow_requests array, add the property, loading.
Then you can use it in your template.
<div class="col-sm-12"
style="padding:0;"
v-for="follow_request in follow_requests"
v-loading.body="follow_request.loading"
#click="follow_request.loading = !follow_request.loading>
I recently asked a question on Stack where I was trying to obtain a DOM element's ID via AngularJS' ng-click. Essentially the answer which was given (with an important caveat was):
Use event.currentTarget vs event.target to get the element to which the binding was registered, BUT this is an atypical way to do it because it ties the controller to the DOM when ideally the controller should know nothing about the DOM.
I'm starting to get a better idea of this now, but would like some further help / clarification.
Using ng-repeat I dynamically render a number of tiles being pulled from a database and present them to the user for selection. When a user clicks on a given tile I want to be able to 'know' that element's ID (or some unique identifier key) so that I can pass it into my javascript / java and then retrieve the details for said key where they are rendered in a different, more detailed view.
I've started to research ng-model which supports the two-way MVC idea, but I'm stuck. You can see below that I'm dynamically rendering each tile with a different ng-model value which equals the tile's database key. Is this the solution I want? If so, how can I reference the ng-model value in javascript? Or if I do that, am I breaking the MVC again? If that's the case, what would be a solution which preserves the model?
Cheers
HTML:
<div ng-repeat="tile in tileResult">
<div ng-model={{tile.id}} ng-click="handleThisElement($event); changeView('panel3')" class="container-fluid btn-default tile">
<div class="row">
<div class="col-xs-9">
<div class="row">
...
</div>
</div>
<div class="col-xs-3 tile-stats">
<div class="row text-center">
...
</div>
</div>
</div>
</div>
</div>
Tie the ng-model to an object, best if it's something in the repeater. Also, ng-model is generally used with an input... not on a div, so I'm not sure what you're trying to achieve here.
You may want to initialize the value to the index (or some other default) if the value doesn't exist, this will avoid null pointers when you want to change the value later.
<div ng-repeat="tile in tileResult">
<div ng-model="tile.someDataValue" ng-init="tile.someDataValue = $index" ng-click="handleThisElement($event); changeView('panel3')" class="container-fluid btn-default tile">
...
</div>
</div>
To later reference the value, you can just access your tileResult object at the appropriate value/index
Ex:
console.log($scope.tileResult[0].someDataValue);
Or you can access the entire 'tile' on click by passing the 'tile' into a function. Ex:
<div ng-model="tile.someDataValue" ng-init="tile.someDataValue = $index" ng-click="someFunction(tile); handleThisElement($event); changeView('panel3')" class="container-fluid btn-default tile">
$scope.someFunction = function(someTile){
console.log(someTile.id, someTile); // log the id, then the entire object
}
If I understand you correctly, you want to be able to access the unique identifier for each tile.
This can easily be done without Ng-Model! One easy fix would be to set the id of each element with the unique identifier:
<div ng-repeat="tile in tileResult">
<div id="{{tile.id}}" ng-click="handleThisElement($event); changeView('panel3')" class="container-fluid btn-default tile">
<div class="row">
This way, when you pass $event to your handleThisElement function, you are able to access the id in the same way you have before.
I'm trying to toggle a variable on click of an element in the DOM and I'm getting some strange behaviour.
Full Example Here
Essentially if I put the ng-click on the .options div and leave the controller on the .options-tab div, the event triggers (but applies to everything inside the .options div). And for some reason I am forced to apply the ng-controller again.
<div ng-app ng-controller="Swipe" class="container">
<div class="options" ng-click="swiped=!swiped2">
<div ng-controller="Swipe" class="options-tab" ></div>
</div>
</div>
If I put it on the element that I want it on, it doesn't trigger the event.
<div ng-app ng-controller="Swipe" class="container">
<div class="options">
<div ng-controller="Swipe" class="options-tab" ng-click="swiped=!swiped2"></div>
</div>
</div>
You had a few issues:
Multiple controller declarations creating duplicate scopes
ng-click="swiped1=!swiped1" on both the options and options-tab elements (it was being set and then reversed immediately)
Your 2nd example was set to ng-click="swiped=!swiped2" instead of ng-click="swiped2=!swiped2"
Updated working fiddle: http://jsfiddle.net/Xya3f/2/
I am using this: http://angular-ui.github.io/ui-utils/ and to be more specific this:https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md
however it does not seem to work. Here is an example:
<div ng-scroll-viewport style="height:240px;" class="chat-messages">
<div class="chat-message" ng-scroll="chat in chats">
<div ng-class="$index % 2 == 0? 'sender pull-right' : 'sender pull-left'">
<div class="icon">
<img src="{{chat.img}}" class="img-circle" alt="">
</div>
<div class="time">
{{chat.time}}
</div>
</div>
<div ng-class="$index % 2 == 0? 'chat-message-body on-left' : 'chat-message-body'">
<span class="arrow"></span>
<div class="sender">{{chat.name}}</div>
<div class="text">
{{chat.msg}}
</div>
</div>
</div>
</div>
But All I get in HTML is this :
<div class="chat">
<div class="chat-messages" style="height:240px;" ng-scroll-viewport="">
<!--
ngScroll: chat in chats
-->
</div>
If I replace ng-scroll with ng-repeat, it works perfectly. But chats need scroll bars, so... How can I get one? :)
The documentation of ngScroll directive had also tricked me into simply replacing ng-repeat by ng-scroll. Unfortunately, it turned out not as simple as that, see also the small, working example at http://plnkr.co/edit/fWhe4vBL6pevcuLutGC4 .
Note that
"datasource" (or whatever object you want to iterate over for the contents of the scroll list) must implement a method "get(index,count,success)" that calls success(results), see hXXps://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#data-source
The array must have exactly count elements. Otherwise, no scroll window/bar will ever show, which can be very irritating!
Although UI.Utils says it has no external dependencies, ui.scroll has actually a dependency on either ui.scroll.jqlite, or jQuery. So make sure to list both ui.scroll and ui.scroll.jqlite in your module definition which contains the controller with datasource object (and load their .js files, or load ui-utils.js which contains both), see https://github.com/angular-ui/ui-utils/blob/master/modules/scroll/README.md#dependencies
Be careful when your server is sending some Content Security Policies (CSP). Maybe turn them off while trying to get ng-scroll to work first, then re-apply CSP and tune the policies accordingly for ui.scroll to work.
One way of getting a scroll is to use CSS, set overflow-y to scroll and you will get scroll bar.
If you need to scroll to the bottom, play with anchorScroll
http://docs.angularjs.org/api/ng.$anchorScroll.
I'm trying to get some divs with an id to randomize the order they appear in. I've found a script that supposedly will do this, but for the life of me, I can't figure out why mine isn't working.
Basically, when the page loads the HTML will read like this:
<div class="main">
<div id="box">1</div>
<div id="box">2</div>
<div id="box">3</div>
<div id="box">4</div>
</div>
But the code when applied will randomize the order in which they appear (in the browser), like so:
<div class="main">
<div id="box">3</div>
<div id="box">1</div>
<div id="box">4</div>
<div id="box">2</div>
</div>
And here is the javascript that supposedly is making it all work:
function reorder() {
var grp = $(".main").children();
var cnt = grp.length;
var temp,x;
for (var i = 0; i < cnt; i++) {
temp = grp[i];
x = Math.floor(Math.random() * cnt);
grp[i] = grp[x];
grp[x] = temp;
}
$(grp).remove();
$(".main").append($(grp));
}
I thought it was because I had an id property, but even if I strip that out and just make it a plain old div tag, it doesn't work :/
Here is the the like to a js fiddle of the code in question...
js fiddle
There are a few questions here similar to this, but they're all older topics, so I hope no one minds my making a new one. I'm still pretty new to javascript, if that isn't already obvious :D
Just change
<div class=".main">
<div id="#box">1</div>
<div id="#box">2</div>
<div id="#box">3</div>
<div id="#box">4</div>
</div>
to
<div class="main">
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
</div>
Two errors :
the ".main" which should be "main" as you look for $(".main").children().
the id "#box" that you were using for more than one element
In your fiddle, you also forgot to import jQuery.
Demonstration (click "Run with JS")
First, as was said before, ID should be unique, and they don't start with a #. The selector for ids uses a #.
Same for classes, they should start with a letter, only the selector uses a dot.
Now for your fiddle. You visibly use jQuery, here, so include jQuery on your fiddle, in the menu on the left.
Then, what you are doing in your fiddle is defining a function, but you never call it.
Just add a call to your function at the end of your code (that will be called by jsFiddle on load of the document, like this:
reorder();
Worked for me on your fiddle.