Оценить выражение внутри пользовательской директивы

Я приложил parameter к моему $scope controller, который содержит ряд keys: values. То, что я хочу сделать, - это цикл через каждый из них и отображение имени и значения параметра, но перед отображением значения я хочу проверить, является ли это 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="[email protected]" 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>

источник

2016-07-15 leota

Я обновил свой код следующим образом (чтобы быстро показать, как достичь в соответствии вы начали метод).

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="[email protected]" 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>

источник

2016-07-15 12:04:43

Спасибо, это отображение ключей и значений, но типа ввода неправильно. Они все флажки – leota

Plunker обновлен, проблема в том, что typeof (текущий) === "number" должен быть typeof (scope.current) === "number" –

Изолируйте область применения и добавить свойство:

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>

источник

2016-07-15 11:53:19 fantarama

Пытался что вы предложили, но получили те же результаты, – leota

Отредактировано: параметры использования в качестве простого массива и изолированного объема – fantarama

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 + '>'); 
     } 
    } 
    } 
});

источник

2016-07-15 12:25:18

уборщик способ сделать то же самое:

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

источник

2016-07-15 12:29:27

Оценить выражение внутри пользовательской директивы

ответ

Смежные вопросы