个人中心
gpt4 book ai didi

javascript - 如何在 AngularJS 中显示和隐藏代码块

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:14:52 27 4
gpt4 key购买 nike

在我的 AngularJS 项目中，我有一个任务:当来自代码的带有 md-autocomplete 的两个点指令被填充时，结果指令必须立即显示，没有任何按钮。当我按下十字键时(如图所示清除自动完成字段)，该 block 也会隐藏而没有任何按钮

我的代码运行不太正确

请注意浏览器控制台中的错误。 

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

app.controller('mainCtrl', function($scope){
    $scope.interim = false;

    $scope.go = function(){
        $scope.interim = true;
    };
});

app.directive('point', function(){
    return {
        restrict: 'AE',
        template: '<div layout layout-sm="column">' +
                    '<md-autocomplete ng-disabled="isDisabled" md-no-cache="noCache" md-selected-item="selectedItem" md-search-text-change="searchTextChange(searchText)" md-search-text="searchText" md-selected-item-change="selectedItemChange(item)" md-items="item in querySearch(searchText)" md-item-text="item.display" md-min-length="0" placeholder="{{place}}">' +
                        '<md-item-template>' +
                             '<span md-highlight-text="searchText" md-highlight-flags="^i">{{item.display}}</span>' +
                        '</md-item-template>' +
                    '</md-autocomplete>' +
                '</div>',
        controller: PointCtrl,
        scope: {
            place: '@',
            go: '&'
        }
    }
});

function PointCtrl($scope, $rootScope, $timeout, $q, $log) {

    $scope.simulateQuery = false;
    $scope.isDisabled = false;

    $scope.cities = loadAll();
    $scope.querySearch = querySearch;
    $scope.selectedItemChange = selectedItemChange;


    function loadAll() {
        var allCities = 'London, Manchester, Liverpool, Paris, Lion, Prague, New York, Dallas';

        return allCities.split(/, +/g).map(function (city) {
            return {
                value: city.toLowerCase(),
                display: city
            };
        });
    }

    function querySearch(query) {
        var results = query ? $scope.cities.filter(createFilterFor(query)) : $scope.cities,
            deferred;
        if ($scope.simulateQuery) {
            deferred = $q.defer();
            $timeout(function () {
                deferred.resolve(results);
            }, Math.random() * 1000, false);
            return deferred.promise;
        } else {
            return results;
        }
    }

    function createFilterFor(query) {
        var lowercaseQuery = angular.lowercase(query);

        return function filterFn(city) {
            return (city.value.indexOf(lowercaseQuery) === 0);
        };
    }

    function selectedItemChange(item) {
        $log.log('value: ' + item.display);
        $scope.chosenPoint = item.display;

        $scope.$watch('chosenPoint', function (newVal, oldVal) {
            if (newVal !== '') {             //if autocomplete field is completed
                $scope.go();             //how block with results directive
            } else {
                //$scope.hideBlock();              //if not or cleared - hide block
            }
        });
    }
}

app.directive('results', function() {
    return {
        restrict: 'AE',
        template: '<div style="width: 400px; height: 200px; background-color: red; font-size: 30px; text-align: center" ng-show="interim">I need to show this block when autocomplete fields are filled and hide it when both or, at least, one of the fields are cleared, pressing a cross</div>'
    }
});
<html ng-app="app">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
    <style>
        .resultsBlock {
            width: 400px;
            height: 400px;
            font-size: 14px;
        }

        h3 {  margin: 20px 0;  }

        md-autocomplete button{
            position: relative;
            left: 100px;
            line-height: 20px;
        }

        md-autocomplete input:not(.md-input) {
            font-size: 14px;
            width: 40%;
        }
    </style>
</head>
<body ng-controller="mainCtrl">
    <div class="resultsBlock" layout="column">
            <point place="point_1"></point>
            <h3>Block of text will be shown when both autocomplete fields will be completed</h3>
            <results></results>
            <point place="point_2" go="go()"></point>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
    <script src="main.js"></script>
</body>
</html>

最佳答案

在您的 point 指令中，当您单击 x 删除选择时，selectionItemChange 函数将与 item 一起调用 参数未定义。这就是您在控制台中收到错误的原因。

更改您的函数以检测该条件。

您的点指令

function selectedItemChange(item) {

    //add event emitter
    $scope.$emit("pointChange", item);

    if (item) {
        $scope.chosenPoint = item.display;
    } else {
        //set to empty string if 'item' parameter is undefined
        $scope.chosenPoint = '';
    }

    if ( $scope.chosenPoint !== '') { 
        //if autocomplete field is completed
        $scope.go();
    }
}

另请注意事件发射器的添加。在您的主 Controller 中监听该事件并使用它来清除 block 。

你的主 Controller 

app.controller('mainCtrl', function($scope){
    $scope.interim = false;

    $scope.$on("pointChange", function (e,item) {
        if (!item) {
          console.log("Clearing block");
          $scope.interim = false;
        }
    });

    $scope.go = function(){
        $scope.interim = true;
    };
});

关于javascript - 如何在 AngularJS 中显示和隐藏代码块，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34294960/

27 4 0
文章推荐： cardview onTouch监听器冲突/灵敏度中的android listview
文章推荐： ios - 安全文件直接上传到 s3 或服务器到 s3(从 iOS 应用程序)
文章推荐： ios - 副标题 TableView 单元格
文章推荐： android - Context.getSystemService 返回的哪个服务永远不会为空？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com