Angularjs access attribute in the controller

Question

I am very new in AngularJs, I want to create a Select list and when the choose one option open the correspondent file. This is my main.html

<select ng-model="model.options" >
  <option value="1"> 1</option>
  <option value="2"> 2</option>
  <option value="3"> 3</option>
</select>


<div ng-show="model != null" class="main" ng-controller = "TestCtrl">
   <li class="artist cf" ng-repeat="item in data">
      <div class="info">
        <h1>{{item.name}}</h1>
      </div>
    </li>
</div>

this is the controller

angular.module('myApp')
  .controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('data.json').success(function(data) {
    $scope.data = data;
  });
}]);

Someone can help me doing something like this ?

$http.get('data-$SELECTED-OPTION-VALUE.json').success(function(data) {

Roberto Linares · Accepted Answer · 2015-05-21 17:14:08Z

First of all, you should place your ng-controller attribute in a higher order tag, like the <body> or a wrapping <div>. This is necesary so all your related HTML elements like your <select> and your <div> share the same controller's scope.

Second, the binding in your select is wrong. Instead of ng-model="model.options" you need to use a variable declared in your controller's scope. Ej:

In your controller:

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.selectedValue = 0;
}

In your HTML:

<div class="wrap" ng-controller="TestCtrl">
  <select ng-model="selectedValue" >
    <option value="1"> 1</option>
    <option value="2"> 2</option>
    <option value="3"> 3</option>
  </select>

  <div ng-show="model != null" class="main">
    ...
  </div>
</div>

Then, you can bind your data loading to a button click or something like that, calling a scope function in which you will have available the selectedValue scope variable. Ej:

In your HTML, inside <div class="wrap">:

<input type="button" value="load data" ng-click="loadData()" />

In your controller:

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.selectedValue = 0;

  ...

  $scope.loadData = function() {
    $http.get('data-' + $scope.selectedValue + '.json').success(function(data) {
        ...
    }
  }
}

JB Nizet · Accepted Answer · 2015-05-21 16:53:38Z

1

First of all, make sure the select is inside the element controlled by TestCtrl, and not outside.

Then, use ng-change, in order to call a function each time the selected value changes:

<select ng-model="model.options" ng-change="displayData()">

and in the controller:

$scope.displayData = function() {
     $http.get('data-' + $scope.model.options + '.json').success(function(data) {
        $scope.data = data;
     });
};

Note that the naming is bad here: why name model.options (plural form) a variable containing one selected option?

answered May 21, 2015 at 16:53

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Comments

Dan Moldovan · Accepted Answer · 2015-05-21 16:42:07Z

0

You could attach an ngClick event on each list item like this

<li class="artist cf" ng-repeat="item in data" ng-click="select(item)>
  <div class="info">
    <h1>{{item.name}}</h1>
  </div>
</li>

Then you could have a function in your TestCtrl which handles the onclick handler

.controller('TestCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('data.json').success(function(data) {
  $scope.data = data;

  $scope.select = function (item) {
       // do something with the item here.    
  };
});

answered May 21, 2015 at 16:42

Dan Moldovan

3,5912 gold badges16 silver badges24 bronze badges

1 Comment

user567 Over a year ago

Sorry but I think you misunderstood me. I want to load the corresponding data.json for the selected option. If option 1 is selected then data1.json.... After I just want to print the result, I don't need ng-click there

Dan Moldovan · Accepted Answer · 2015-05-21 16:52:29Z

0

Seeing as how I misunderstood your first answer, you could watch your model.options and do the query based on that

$scope.$watch(model.options, function (newValue, oldValue) {
    getData(newValue); // newValue will be 1,2 or 3 in your case
};

var getData = function (value) {
    $http.get('data' + value + '.json') // you get it from here
}

answered May 21, 2015 at 16:52

Dan Moldovan

3,5912 gold badges16 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angularjs access attribute in the controller

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related