小编cai*_*lin的帖子

Typeahead.js会干扰Bootstrap输入组

如何防止Typeahead.js拆分我的Twitter Bootstrap 3输入组?每当我将Typeahead javascript指向属于输入组的文本区域时,连接的文本区域和提交按钮就会停止连接.这是Typeahead中的一个错误,还是有解决方法?

无需加载Typeahead.JS:

在此输入图像描述

使用Typeahead.JS:

在此输入图像描述

我原来的HTML:

    <div class="col-sm-4 hidden-xs">
    <form class="navbar-form" role="search">
        <div class="input-group">
        <input type="text" id="tags" class="form-control" name="q">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit">Search</button>
            </div>
        </div>
    </form> 
    </div>
Run Code Online (Sandbox Code Playgroud)

这是Typeahead对此HTML的作用:

<div class="col-sm-4 hidden-xs">
        <form class="navbar-form" role="search">
            <div class="input-group">
            <span class="twitter-typeahead" style="position: relative; display: inline-block;">
            <input type="text" class="form-control tt-hint" disabled="" autocomplete="off" spellcheck="false" style="position: absolute; top: 0px; left: 0px; border-color: transparent; box-shadow: none; background-attachment: scroll; background-clip: border-box; background-color: rgb(255, 255, 255); background-image: none; background-origin: padding-box; background-size: auto; background-position: 0% 0%; background-repeat: …
Run Code Online (Sandbox Code Playgroud)

html javascript css twitter-bootstrap typeahead.js

25
推荐指数
3
解决办法
1万
查看次数

当有新请求时,取消正在进行的Angular $ http请求

当有新请求时,如何取消正在进行的Angular $ http请求?

我有一个Angular应用程序,其视图是在用户输入时实时更新.有时旧请求在最新请求之后完成,这意味着视图显示错误的数据.当有新的请求时,取消之前请求的最直接的方法是什么?

使用Angular 1.5,它的价值.

<input ng-model = "query" ng-keyup = "search()"/>
{{results | json}}

// In the controller:
    $scope.search = function(){
        $http({
            method: "GET",
            url: "/endpoint.php"
            params: {
                query: $scope.query
            }
        }).then(function(response){
            $scope.results = response.data;
        })
    }
Run Code Online (Sandbox Code Playgroud)

我试过的一个解决方案:

// In the controller:
    var canceler = $q.resolve();    // New
    $scope.search = function(){
        canceler.resolve("Canceling old request");     // New
        $http({
            method: "GET",
            url: "/endpoint.php"
            params: {
                query: $scope.query
            },
            timeout: canceler.promise    // New
        }).then(function(response){
            $scope.results = response.data;
        })
    }
Run Code Online (Sandbox Code Playgroud)

在这种情况下,即使我在$ http请求之前调用了canceler.resolve,该请求也会变为"失败". …

javascript angularjs

20
推荐指数
2
解决办法
1万
查看次数

没有相机供应商!injectionError

我是Ionic 2的初学者.我想在Ionic中使用相机.我关注了https://ionicframework.com/docs/native/camera/ tutorial.我已经安装了cordova-plugin-camera插件并使用cli代码安装了ionic-native/camera.

当我为项目服务时,它显示运行时错误:

未捕获(承诺):错误:没有相机提供商!injectionError

我发送app.module.ts,html页面,并输入脚本页面.请看一看.

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HttpModule } from '@angular/http';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import …
Run Code Online (Sandbox Code Playgroud)

cordova ionic3

8
推荐指数
2
解决办法
1万
查看次数

在 Angular 8 项目中使用对象哈希会导致“无法读取未定义的属性‘加密’”错误

我有一个 Angular-CLI 项目,它利用对象哈希库从对象创建哈希。通常我会放

import * as objectHash from 'object-hash'

在我的一个组件文件的顶部,然后const hash = objectHash(obj)在我需要散列的任何地方执行。

我刚刚将我的项目升级到Angular 8,突然间,Angular 项目服务很好,但是当我运行生产构建时,我收到一个错误:Cannot read property 'crypto' of undefined.

这是因为 Angular 8 生成了不同的 JavaScript,为较新的浏览器<script type="module">和较旧的浏览器生成了一些包<script nomodule>。当脚本有 时type="module",显然this被区别对待 - 所以对象哈希库的引用this被破坏:https : //github.com/puleos/object-hash/issues/71

有没有人对我如何解决这个问题有任何见解?

我看到的潜在解决方案是:

  • 以某种方式导入对象哈希

  • 使用完全不同的浏览器兼容对象哈希库(我还没有找到)

  • 让 Angular-CLI v8 停止生成差异化 JS 并吐出老式包(我还没有找到解决方案)
  • 降级到 Angular 7

typescript webpack angular-cli angular object-hash

7
推荐指数
1
解决办法
2140
查看次数

MySQL分组不尊重ORDER BY

我正在尝试执行MySQL查询以在Web论坛中查找最近活动的线程(以及每个线程的最新注释).线程存储在两个表中,forum_topics并且forum_responses每个表forum_topic都有很多forum_responses.

在这里,我对forum_reponses加入的搜索进行了搜索forum_topics,降序排序为forum_response.id:

select t.id, t.title, r.id, r.body 
    from forum_responses r 
    inner join forum_topics t on (r.forum_topic_id = t.id) 
    order by r.id desc;

+----+--------------+----+----------------------------------+
| id | title        | id | body                             |
+----+--------------+----+----------------------------------+
| 17 | New Topic    | 69 | yes                              |
| 19 | Test Topic 1 | 68 | This is a test                   |
| 17 | New Topic    | 64 | hey …
Run Code Online (Sandbox Code Playgroud)

mysql sql sorting group-by

6
推荐指数
1
解决办法
152
查看次数

AngularJS JSON格式

我是AngularJS的新手,我正在尝试根据表tr和td值制作格式化的JSON.

表tr是自动生成的.提交表单后,我尝试生成json值.

提交表单后,我需要生成JSON.

<form>

    <table>
        <!-- Auto generated rows -->
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control"  name="ttype" value="">
                <option value="bbb" selected>Test</option>
                <option value="aaa" >Lumpsum</option>
            </select></td>
            <input type="text" class="form-control parsley-success" name="tvalue" >
            </td>
        </tr>
        <tr>
            <td>
            <input type="text" class="form-control" name="tname"  value="">
            </td>
            <td>
            <select ng-model="selection1" class="form-control" …
Run Code Online (Sandbox Code Playgroud)

javascript jquery json angularjs

6
推荐指数
1
解决办法
250
查看次数

在新选项卡中打开由 [innerHTML] 绑定的 Angular 6 链接

我有一个<div>通过[innerHTML]绑定填充的 Angular 6 应用程序。我怎样才能申请target='_blank'到这个里面的所有链接div

我试过的:

到目前为止,我已经尝试创建一个包装 div 的指令,并在运行更改检测后,拉出一个子<a>标签列表并应用一个target='_blank'属性。到目前为止,我还无法ContentChildren访问任何链接:它只是拉出一个空列表。

有没有人有这样做的经验,或者有更优雅的解决方案?

@Directive({
  selector: '[appExternalLink]'
})
export class ExternalLinkDirective implements AfterContentChecked, AfterViewChecked {

  @ContentChildren('a', {descendants: true}) links: QueryList<any>;


  @Input() appExternalLink: string;
  constructor() {
    console.log('HELLO FROM APPEXTERNALLINK');
  }

  ngAfterContentChecked() {
    console.log(this.links);
  }

}
Run Code Online (Sandbox Code Playgroud)

然后,在绑定内容时:

<div appExternalLink>
  <div [innerHTML]="content"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular

6
推荐指数
1
解决办法
1727
查看次数

嵌入式 Google 地图上的捏合缩放可缩放整个页面

如何让捏合缩放功能在基于 Google 地图 v3 的网络应用程序中正常工作?现在,在触摸屏 Windows 8 设备上捏合将缩放整个页面,而不是地图。我已经在 Chrome 和 Firefox 中尝试过此操作,它在 Google 地图网站上可以正常工作,但在我的网站上却不行。

我的元素中有以下元标记<head>,但它似乎没有帮助。我还需要添加另一个元标记吗?我检查了 Google 地图网站的来源,但找不到任何看起来相关的元标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Run Code Online (Sandbox Code Playgroud)

html javascript google-maps google-maps-api-3 pinchzoom

5
推荐指数
1
解决办法
1618
查看次数

在Google Maps V3中获取GeoJSON数据图层的属性

将geoJSON文件作为数据层加载到Google Map时,如何访问数据层本身的属性?

我知道如何访问各个属性,posts_here如下例所示.我想要得到的是图层本身的属性 - 在本例中,maxPosts.

$.getJSON("http://example.com/posts/grid.json" + location.search, function (data) {
        grid = map_canvas.data.addGeoJson(data);
        map_canvas.data.setStyle(function(feature) {
        return /** @type {google.maps.Data.StyleOptions} */({
            strokeWeight: Math.log(feature.getProperty('posts_here')),
        });
    })
});
Run Code Online (Sandbox Code Playgroud)

grid.json我正在加载的示例:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-58,-35],
                        [-58,-34],
                        [-57,-34],
                        [-57,-35],
                        [-58,-35]
                    ]
                ]
            },
            "properties": {
                "posts_here": "177"
            }
        }
    ],
    "properties": {
        "maxPosts": "177"
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript jquery google-maps google-maps-api-3

5
推荐指数
1
解决办法
4979
查看次数

将数据分箱到 Google 地图中的六角形网格中

我正在尝试在 Google 地图上的六角形网格中显示地理空间数据。

为此,给定六边形网格大小,X我需要能够将 ( {lat, lng}) 坐标转换为{lat, lng}包含它们的六边形网格图块的 ( ) 中心。

最后,我希望能够在 Google 地图上显示数据,如下所示:

在此输入图像描述

有人知道这是如何完成的吗?

我尝试将这个 Python 六边形分箱脚本binner.py移植到 Javascript,但它似乎无法正常工作 - 输出值与输入值都相同。

对于这个例子,我不关心单个位置是否有多个多边形,我只需要弄清楚如何将它们放入正确的坐标中。

下面的代码,(这里是 Plunker!

var map;
var pointCount = 0;
var locations = [];
var gridWidth = 200000; // hex tile size in meters
var bounds;

var places = [
  [44.13, -69.51],
  [45.23, -67.42],
  [46.33, -66.53],
  [44.43, -65.24],
  [46.53, -64.15],
  [44.63, -63.06],
  [44.73, -62.17],
  [43.83, -63.28],
  [44.93, -64.39],
  [44.13, -65.41], …
Run Code Online (Sandbox Code Playgroud)

javascript google-maps hexagonal-tiles binning

5
推荐指数
1
解决办法
6899
查看次数