CODEWITHSUNDEEP
javascriptjqueryangularjs
Alex Man
Alex Man

Reputation: 4886

value not getting - angular JS

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'}
];

  }]);

Upvotes: 0

Views: 453

Answers (2)

Khanh TO
Khanh TO

Reputation: 48982

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

Upvotes: 4

user2445124
user2445124

Reputation:

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>

Upvotes: 2

Related Questions