CODEWITHSUNDEEP
javascripthtmlangularjs
Links
Links

Reputation: 227

How to update data dynamically using Angular

I am trying to update the existing data when user select a option from select element using angular framework

I have something like this.

<div>
      <button type="button">
         {{tests[0].test}} 
     </button>
     <ul class="dropdown-menu" role="menu">
        <li ng-repeat='test in tests'><a href="#/test/{{test.test}}" >{{test.test}}</a></li>
     </ul>
</div>

My test-controller.js

angular.module('MHApp', ['ngRoute']).
controller('NavCtrl', ['$scope', function ($scope) {
    $scope.tests = [
             {'test':'test 1', 'link':'t1'},
             {'test':'test 2', 'link':t2'},
             {'test':'test 3', 'link':'t3'},
    ]
}])

Currently the button content is hardcorded using tests[0].test but I want the button element contexts get updated when user select the li a tag. The data is actually more complex. Can anyone help me about it? Thanks a lot!

s

Upvotes: 1

Views: 1991

Answers (4)

Al R.
Al R.

Reputation: 2480

What I think you're asking:

  • Provide the user with a list of options that contain links.
  • Upon selecting (via a click) an option from the list, change the button such that when the user clicks on it they are taken to the location contained in the appropriate link.

To solve this, you can simply make use of the ng-click directive to set the selected element when a user clicks on an li and to open a new window when the user clicks on the button.

Here's a working example: http://jsfiddle.net/5V89q/4/

Also, FYI, you should use ng-href when setting links dynamically: http://docs.angularjs.org/api/ng/directive/ngHref

HTML

<div ng-app="mhapp" id="ng-app">
    <div ng-controller="navctrl">
        <button type="button" ng-click="buttonClick()">
            Go to {{selected.name}}
        </button>
    <ul class="dropdown-menu" role="menu">
        <li style="cursor:pointer" ng-repeat='test in tests' ng-click="setLink(test)">
            {{test.name}}
        </li>
    </ul>
    </div>
</div>

JavaScript

angular.module('mhapp', [])

angular.module('mhapp').controller('navctrl', ['$scope', function ($scope) {
//available links
$scope.tests = [
    {'name':'Google', 'link':'http://www.google.com'},
    {'name':'Bing', 'link':'http://www.bing.com'},
    {'name':'Yahoo', 'link':'http://www.yahoo.com'}
]
//the link the button should point to (defaults to first available)
$scope.selected = $scope.tests[0];

//when the user selects an <li>, set the "selected" property
$scope.setLink = function(obj){
    $scope.selected = obj;
}

//when the button is clicked open the link in a new window
$scope.buttonClick = function(){
    window.open($scope.selected.link);
}
}])

Upvotes: 0

Nikita
Nikita

Reputation: 6089

you can just use a new scope property (which will be declared implicitly) and reference it from your button (no need for DOM traversal or attr() push-ups):

<div ng-controller="NavCtrl">
      <button type="button">
         {{selectedTest.test}} 
     </button>
     <ul class="dropdown-menu" role="menu">
        <li ng-repeat='test in tests'><a ng-click="selectedTest = test">{{test.test}}</a></li>
     </ul>
</div>

Your JS is fine as-is. What will happen is that ng-click attribute's expression will be evaluated on click, and AJS will implicitly declare $scope.selectedTest. during the same digest <button>'s body template will be re-eval'd. That's it.

Upvotes: 0

Iv&#225;n Guill&#233;n
Iv&#225;n Guill&#233;n

Reputation: 314

You have a missing "'" in your tests json, and i think you should use a method, here you have a working example: http://plnkr.co/edit/y09j0rmeDAIbISzeF9QC

You can also use routing to use different controllers, you have a more info at AngularJS Docs. Hope it helps!

Upvotes: 1

Eugene P.
Eugene P.

Reputation: 2625

html:

 <body ng-controller="NavCtrl">
    <div>
      <button type="button">
         {{selected}} 
     </button>
     <ul class="dropdown-menu" role="menu" ng-click='action($event)'>
        <li ng-repeat='test in tests'><a href="#/test/{{test.test}}" data-test={{test.test}} >{{test.test}}</a></li>
     </ul>
</div>
  </body>

js:

var app = angular.module('app', []);
 app.controller('NavCtrl', ['$scope', function ($scope) {
        $scope.tests = [
          {'test':'test 1', 'link':'t1'},
          {'test':'test 2', 'link':'t2'},
          {'test':'test 3', 'link':'t3'},
        ];

        $scope.selected = $scope.tests[0].test;

        $scope.action = function (e) {
         $scope.selected = angular.element(e.srcElement).attr('data-test');
          console.log($scope.selected);
        }
    }]);

so, simply saying, here I'm catching click on parent UL and after that extracting data-test value. I specially did this, assuming that value of anchor can be invalid(mean too long, or not sensitive for example)

working sample : http://plnkr.co/edit/HAI1DAwKbB9co9BCUsH3?p=preview

Upvotes: 2

Related Questions