Question

小问题。我无法找到任何解决方案

我有一些指令需要在某些情况下插入我的标签中。

我的表单对象

function AppCtrl($scope) {

    $scope.form ={
        name:{
            type: 'text',
            validate: 'letters'
        },
        tel:{
            type: 'number',
            validate: 'digits'
        }
    }
}

我的指示

<body ng-app ng-controller="AppCtrl">
<input type="{{v.type}}" placeholder="{{k}}" {{v.type=='number' ? 'string-to-number' : '' }} {{v.validate}} value=""  ng-repeat="(k,v) in form">
</body>

我需要渲染＆＃39;验证＆＃39;和＆＃39;字符串到数字＆＃39;输入中的属性。但我的代码并没有激发

这是jsfiddle的例子 http://jsfiddle.net/FxM3B/517/

Answer 1

我更新了plunker with a possible solution

   <div ng-repeat="(k,v) in form">

<input ng-if="v.type ==='number'" type="{{v.type}}" placeholder="{{k}}"  validate="{{v.validate}}" value="" string-to-number>
    <input ng-if="v.type !=='number'" type="{{v.type}}" placeholder="{{k}}"  validate="{{v.validate}}" value="">
    </div>

检查ng-if值和添加两个选项的标记。

Answer 2

你不能以这种方式添加HTML属性，你应该看看ng-attr，但你可能需要更改你的指令，因为它在所有情况下都添加了属性，只有内容是动态的。

否则本文将介绍几种解决方案：http://www.thinkingmedia.ca/2015/03/conditionally-add-a-html-element-attribute-value-in-angularjs/

Answer 3

由于要添加到元素的属性名称是模型属性的值，因此不能使用ng-attr指令。您可以编写自己的指令来处理这种情况。这是jsfiddle example

.directive('boolAttrs', function(){
    return function(scope, element, attrs){

        var propExpr = attrs['boolAttrs'];

        if (propExpr)
        {
            var data = angular.fromJson(propExpr);

            if (angular.isArray(data) && data.length > 0) {

                angular.forEach(data, function (value, index, array) {

                    var propValue = scope.$eval(value);

                    if (angular.isFunction(propValue))
                        propValue = propValue();

                    if (propValue)
                        element.attr(propValue, "");
                });
            }
        }
    };
})

您可以这样方式应用此指令：

 bool-attrs='["v.validate", "v.type == \"number\" ? \"string-to-number\" : \"\" "]'

bool-attrs的值应该是一个有效的json数组字符串，它定义evaluete的表达式以确定要插入的属性的名称。

具有指令属性的AngularJS操作

3 个答案: