Question

我已将parameter个对象附加到$scope controller，其中包含一系列keys: values。我想要的是循环遍历每个并显示参数名称和值，但在显示值之前，我想检查它是否{sa boolean或number来决定类型<input>标签。我是Angular.js的新手，所以我真的不知道如何评估指令中的表达式。这是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 1

我已将您的代码更新为以下内容（以便根据您启动的方法快速展示如何实现）。

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>

Answer 2

隔离范围并添加属性：

Plunker edited

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

  $scope.name = "myObject";

  $scope.parameters = [45, 4.9, true, false];
});

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

HTML：

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

Answer 3

Plunker：https://plnkr.co/edit/IaTjhMyvo8u9ixCHuXGT

我对你的JS代码进行了一些更改：

// 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',
    replace: true,
    template: '<div></div>',
    link: function (scope, element, attrs) {
      var key = Object.keys(scope.current)[0];
      var value = scope.current[key];

      if (typeof value === "number") {
        element.append('<p>' + key + '</p><input type="range" value="' + value + '">');
      } else {
        var checked = value ? ' checked' : '';
        element.append('<p>' + key + '</p><input type="checkbox" ' + checked + '>');
      }
    }
  }
});

Answer 4

做同样事情的更清洁方式：

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

更新了plunkr：

https://plnkr.co/edit/KazghuS90ZYVoDWsiEld?p=preview

评估自定义指令中的表达式

4 个答案: