leota leota - 4 months ago 22
HTML Question

Evaluate expression inside custom directive

I have attached a

parameter
object to my
$scope controller
, which contains a series of
keys: values
. What I want to to is to loop trough each of them and display the parameter name and value, but before displaying the value I want to check if it's a
boolean
or
number
to decide the type of the
<input>
tag.
I'm new to
Angular.js
so I'm don't really know how to evaluate expression inside a directive. Here's a live example.

script.js

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function ($scope){

$scope.name = "myObject";

$scope.parameters = [
{parm0: 45},
{parm1: 4.9},
{parm2: true},
{parm3: false}
];
});

myApp.directive('myInputDirective', function () {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function (scope, element, attrs) {
if (typeof scope.current === "number") {
element.append('<p>{{key}}</p><input type="range" value="{{value}}">');
} else {
element.append('<p>{{key}}</p><input type="checkbox" value="{{value}}">');
}
}
}
});


index.html

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h3>
{{name}}
</h3>
<ul ng-repeat="(key, value) in parameters" ng-init="current = value">
<my-input-directive></my-input-directive>
</ul>
</div>
</body>
</html>

Answer

I've updated your code as following (to quickly show how to achieve according you're started method).

See updated Plunker

// Code goes here    
var myApp = angular.module('myApp', []);    
myApp.controller('MyController', function ($scope){

  $scope.name = "myObject";

  $scope.parameters = {
    parm0: 45,
    parm1: 4.9,
    parm2: true,
    parm3: false
  };
});

myApp.directive('myInputDirective', function () {
  return {
    restrict: 'E',
    scope: {
      current: '=',
      key: '='
    },
    replace: false,
    link: function (scope, element, attrs) {
      element.append('<p>' + scope.key + '</p>');
      if (typeof(current) === "number") {
        element.append('<input type="range" value="' + scope.current + '">' + scope.current + '</input>');
      } else {
        element.append('<input type="checkbox" value="' + scope.current + '">' + scope.current + '</input>');
      }
    },
    template: '<div></div>'
  }
});


<!DOCTYPE html>
<html ng-app='myApp'>

  <head>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="MyController">
      <h3>
          {{name}}
      </h3>
      <ul ng-repeat="(key, value) in parameters">
        <my-input-directive current="value" key="key"></my-input-directive>
      </ul>
    </div>
  </body>

</html>