value not getting - angular JS

Question

I've created an application in angular-js for printing certain values dynamically in an html table. The table has basically six columns, in that three (Work Name, Team Name,Place Name) are statically fixed and the last three columns (Service One, Service Two, Service Three) displays depends on the visibility and the order.

The code works fine, but the problem is since we can't predict which order the three services will be also the visibility, within the controller script there is a services json where the information regarding the visibility and the order (this is getting by rest call, for time being I've coded statically) and based on the order and the visibility it should print the value within the table. Code is working but the value is not compiled.

My code is given below

http://jsfiddle.net/ADukg/4934/

index.html

<!doctype html>
<html ng-app="form-example1">

<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <div ng-controller="Controller">
    <table border="1">
      <thead>
        <tr>
          <th>Work Name</th>
          <th>Team Name</th>
          <th>Place Name</th>
          <th ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{servopt.servicename}}</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="val in datas">
          <td>{{val.workname}}</td>
          <td>{{val.teamname}}</td>
          <td>{{val.placename}}</td>
          <td ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{servopt.serviceid}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

script

var app = angular.module('form-example1', []);

app.controller("Controller", ['$scope', function($scope){

$scope.services = [
    {servicename: 'Service One', serviceid: '{{serviceOne}}', display: 'block', order: 3},
    {servicename: 'Service Two', serviceid: '{{serviceTwo}}', display: 'none', order: 2},
    {servicename: 'Service Three', serviceid: '{{serviceThree}}', display: 'block', order: 1}
];


$scope.datas = [
    {workname: 'France', teamname: 'Team PQL', placename: 'Place 1', serviceOne: 'ABC 1', serviceTwo: 'DEF 1', serviceThree: 'GHI 1'},
    {workname: 'India', teamname: 'Team PLQ', placename: 'Place 2', serviceOne: 'ABC 2', serviceTwo: 'DEF 2', serviceThree: 'GHI 2'},
    {workname: 'USA', teamname: 'Team DEF', placename: 'Place 3', serviceOne: 'ABC 3', serviceTwo: 'DEF 3', serviceThree: 'GHI 3'},
    {workname: 'China', teamname: 'Team GHI', placename: 'Place 4', serviceOne: 'ABC 4', serviceTwo: 'DEF 4', serviceThree: 'GHI 4'}
];

  }]);

Khanh TO · Accepted Answer · 2014-03-02 14:30:42Z

4

Remove {{}} from serviceid:

$scope.services = [
    {servicename: 'Service One', serviceid: 'serviceOne', display: 'block', order: 3},
    {servicename: 'Service Two', serviceid: 'serviceTwo', display: 'none', order: 2},
    {servicename: 'Service Three', serviceid: 'serviceThree', display: 'block', order: 1}
];

Use javascript bracket notation to get the value: val[servopt.serviceid]

<tr ng-repeat="val in datas">
   <td>{{val.workname}}</td>
   <td>{{val.teamname}}</td>
   <td>{{val.placename}}</td>
   <td ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{val[servopt.serviceid]}}</td>
</tr>

DEMO

answered Mar 2, 2014 at 14:30

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

Comments

user2445124 · Accepted Answer · 2014-03-02 14:30:07Z

2

With AngularJS, {{ and }} are used for expression evaluation in the view.

In a javascript file, you don't need to use {{ }}, as you are just giving a value to an object property.

Correct example:

In the controller.

$scope.obj = {
    test: '1234'
};

In the view

<span>{{ obj.test }}</span>

answered Mar 2, 2014 at 14:30

user2445124

Collectives™ on Stack Overflow

value not getting - angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related