Question

我创建了一个自定义指令来创建动态UI元素（带有相应标题的复选框）以显示基于JSON数据的书籍。我的目的是基于onSelection数组（全部副本和已售副本）的可用性创建一个单击复选框（特定书本）的文本框，其中onSelection的标题作为占位符仅在被单击书本的文本框内。到目前为止，我已经完成了无需单击复选框即可显示文本框的操作。但是，仅当选中的书中具有与特定书有关的onSelcetion Array时，我才需要显示文本框。任何帮助将非常感激。

punker中包含了完整的代码 Code in plunker

HTML

<!DOCTYPE html>
<html ng-app="myApppli">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>

<body>
<div ng-controller="mycontroller as ctrll">
    <content-item ng-repeat="item in ctrll.content" content="item">
    </content-item>

<div style ="margin-top: 30px;" ng-repeat="item in ctrll.content" content="item" ng-if ="item.onSelection">
<div ng-repeat="onSelection in item.onSelection">

<text-field-new></text-field-new> 
</div>  </div>
</div>

</body>

</html>

app.js

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

app.config(function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['self', '**']);
});

app.constant('URL', '');


app.factory('MedService', function ($http, URL) {
var getMeds = function () {
    return $http.get(URL + 'books.json');
};

return {
    getMeds: getMeds
};
});

app.factory('TemplateService', function ($http, URL) {
var getTemplates = function () {
    return $http.get(URL + 'templates.json');
};

return {
    getTemplates: getTemplates
};
});
datalist = [];

app.controller('mycontroller', function (MedService) {
var ctrll = this;

ctrll.content = [];

ctrll.fetchContent = function () {
    MedService.getMeds().then(function (result) {
        ctrll.content = result.data.books.contents;
                        datalist = ctrll.content;
    });
};
ctrll.fetchContent();
});

app.directive('contentItem', function ($compile, TemplateService) {
var getTemplate = function (templates, type) {
    var types = type.type;
    var template = '';            

    switch (types) {
        case 'textbox':
            template = templates.textboxTemplate;
            break;
        case 'CHECKBOX':
            template = templates.checkboxTemplate;
            break;
    }

    return template;
};

var linker = function (scope, element, attrs) {

    TemplateService.getTemplates().then(function (response) {
        var templates = response.data;

        element.html(getTemplate(templates, scope.content));

        $compile(element.contents())(scope);


    });
};

return {
    restrict: 'E',
    link: linker,
    scope: {
        content: '='
    }
};
});

app.directive("textFieldNew", ['$rootScope', function($rootScope) {
    return {
        restrict : 'E',
        templateUrl : 'text-field-new.html',
        scope : {
         field : "="
        },



        link : function (scope, element, attr) {
            scope.interfaceLabels = scope.$parent.interfaceLabels;
            scope.emailTextfieldClearButton = $rootScope.emailTextfieldClearButton;
            scope.enabledCursor = $rootScope.enabledCursor;

            //TODO - text field validation methods
            //Update keyboard and higiTextField to have field validation be triggered in higiTextField instead of keyboard.js
            //scope.onChangeMethod = scope.$watch('field.text', 
function(newVal, oldVal){
            //     if(typeof(scope.field.callback) === "function"){
            //    scope.field.callback();
            //}
            //});

            scope.setIndex= function(id){
                $rootScope.textFieldIndex = document.getElementById(id).selectionStart;
            };
            scope.startDrag = function(e){
                var e = window.event;
                scope.startDragX = e.pageX;
                e = null;
            };
            scope.clearSelected = function(id){
                var e = window.event;
                scope.stopDragX = e.pageX;
                if(scope.stopDragX > scope.startDragX){
                    document.getElementById(id).setSelectionRange(document.getElementById(id).selectionEnd, document.getElementById(id).selectionEnd);
                    $rootScope.textFieldIndex = document.getElementById(id).selectionEnd;
                }else {
                    document.getElementById(id).setSelectionRange(document.getElementById(id).selectionStart, document.getElementById(id).selectionStart);
                    $rootScope.textFieldIndex = document.getElementById(id).selectionStart;
                }
                e = null;
            };
            scope.clearTextField = function(){
                $rootScope.targetField.text ="";
                $rootScope.hideEmailExtensionTop();
                document.getElementById($rootScope.targetField.id).value = $rootScope.targetField.text;
                if(typeof(scope.field.callback) === "function"){
                    scope.field.callback();
                }
            };

            //Update labels if language is changed.
            scope.enabledCursorWatch = $rootScope.$watch('enabledCursor', function(){
                scope.enabledCursor = $rootScope.enabledCursor;
            });


        }
    }
  }]);

基于AngularJS中的JSON数据和onClicking复选框创建并显示文本框（自定义指令）

0 个答案: