Change div content dynamically on other div click (AngularJS)

Question

So, I'm new to AngularJS and I'm trying to change a div content after another is clicked (this one holds a div with the content that I want to put on the first one).

HTML

<div ng-controller="dCtrl">
    <ul ng-repeat="product in products">
        <li change>
            {{product.name}}
            <div class="hide">{{product.description}}</div>
        </li>
    </ul>
</div>

<div id="test"></div>

Javascript

var app = angular.module("dt", []);

app.directive("change", function() {

    return function(scope, element) {

        element.bind("click", function() {
           var message = element.children("div").text();
           console.log("breakpoint");

           angular.bind("#test", function() {
               this.text(message);
           });
        })
    }
})

app.controller("dCtrl", function($scope) {

$scope.products = [
    { "name" : "Escova XPTO", "description": "Lava tudo num instante"},
    { "name" : "Pasta de Dentes YMZ", "description": "Dentifrico do camandro"}
];

})

I know that I could just say:

$("#test").html(message);

But I'm still confused about mixing jQuery and AngularJS, I dont know if that is a correct way of doing it

Thanks

first of all .. your ng-repeat in on the <ul> should be on the <li> is you want several <li>s and not several <ul> — Bhumi Singhal
– Bhumi Singhal, Commented Apr 16, 2013 at 17:25
What exactly are you trying to do? From your question, I can't tell, but from your HTML it looks like you're just trying to show/hide the production description when a user clicks the product name? If so: jsfiddle.net/sENDS — Langdon
– Langdon, Commented Apr 16, 2013 at 17:26
@Langdon = what is the .visible? The docs do not define it..or i have missed it — Bhumi Singhal
– Bhumi Singhal, Commented Apr 16, 2013 at 17:52
@BhumiSinghal it's just a variable I injected into his model. — Langdon
– Langdon, Commented Apr 16, 2013 at 17:57
@Langdon I'm trying to pass the {{description}} to the div #test not toggle it, can that be done? — Bruno Teixeira
– Bruno Teixeira, Commented Apr 16, 2013 at 20:25

Brian Petro · Accepted Answer · 2013-04-16 20:41:55Z

5

Setup ng-click:

ngClick is for doing things such as the scary jQuery-esque stuff you have going on in your change directive. Place ng-click in your clickable div's attributes and pass in a method that changes the $scope variable accepted by...

ngShow and ngHide.

When true these directives, as the name states, show or hide the associated html object. You can pass in $scope variables determine the boolean value. When the $scope updates these methods automatically update the DOM to show/hide the element.

edited Apr 16, 2013 at 20:41

answered Apr 16, 2013 at 20:34

Brian Petro

1,56716 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Brian Petro Over a year ago

I wouldn't advise using jQuery as there is certainly a better way to do it in angular.

Brian Petro Over a year ago

How to do it in angular may merit another question but has likely been answered somewhere already.

Brian Petro Over a year ago

I am redoing the answer hold on.

Brian Petro Over a year ago

Updated. Use a mix of ngClick and ngShow/Hide write jQuery-less code.

Bruno Teixeira Over a year ago

@BhumiSinghal you have to create a method inside your controller and bind it to ng-click. Inside it you can create scope variables and pass in params that change that variables

|

Collectives™ on Stack Overflow

Change div content dynamically on other div click (AngularJS)

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related