小编Ela*_*dor的帖子

Angular 4 - 显示和隐藏组件

我在同一个html文件中有下一个组件.

<app-form></app-form>
<app-results [hidden]="isOn"></app-results>
<app-contact-primary [hidden]="!isOn"></<app-contact-primary>
<app-contact-second [hidden]="!isOn"></app-contact-second>
Run Code Online (Sandbox Code Playgroud)

在组件"app-form"中,我有两个按钮:

<button pButton label="Contact" (click)="">Contact</button>
<button pButton label="Results" (click)="">Results</button>
Run Code Online (Sandbox Code Playgroud)

如果我点击按钮"联系"必须显示组件"app-contact-primary"和"app-contact-second"并隐藏"app-results"组件.

但是,如果我点击按钮"结果"必须隐藏组件"app-contact-primary"和"app-contact-second"并显示"app-results"组件.

我怎么能这样做?

谢谢

angular-template angular

12
推荐指数
1
解决办法
4万
查看次数

Angular 6 - 从本地加载JSON

我试图加载两种方式的本地JSON文件.

这是我的json文件:

{
  "imgsesion": "fa_closesesion.png",
  "texthome": "volver a la home",
  "logo": "fa_logo.png",
  "menu": {
    "background": "orange",
    "link1": "ESCRITOR",
    "link2": "MÚSICO",
    "link3": "AYUDA ADMIN",
    "submenu": {
      "link1": {
        "text1": "novelas",
        "text2": "obras de teatro"
      },
      "link2": {
        "text1": "compositor",
        "text2": "intérprete"
      }
    }
  }
}
Run Code Online (Sandbox Code Playgroud)
  • 方式1:使用Http

这是我的服务文件(general.service.ts)

  getContentJSON() {
    return this.http.get('assets/json/general.json')
    .map(response => response.json());
  }
Run Code Online (Sandbox Code Playgroud)

这样工作正常,但在Web浏览器控制台中显示下一个错误:

ERROR TypeError: Cannot read property 'menu' of undefined
Run Code Online (Sandbox Code Playgroud)
  • 方式2:使用HttpClient

这是我的服务文件(general.service.ts)

  getContentJSON() {
    return this.httpClient.get("assets/json/general.json");
  }
Run Code Online (Sandbox Code Playgroud)

它不起作用,因为我找不到general.json文件,它通过错误的控制,它给我一个错误404

这是组件文件(app.component.ts)

export class AppComponent implements OnInit {
  contentGeneral: any; …
Run Code Online (Sandbox Code Playgroud)

json angular

7
推荐指数
3
解决办法
5万
查看次数

fullCalendar js 的 DOM 操作

我正在使用fullcalendar,一个利用 jQuery 的 JavaScript 事件日历。

我需要编辑日历的所有日期单元格,添加两个垂直列表,两个列表都向左浮动;我必须实现处理事件吗?

出色地; 我想不是。

有没有一种简单有效的方法来实现这一目标?

下面是我的代码,说明了我尝试实现这一目标的失败:

$("#calendar").fullCalendar({   
    header: {
        left: 'prev',
        center: 'title',
        right: 'next'
    },
    //defaultDate: '2015-02-12',
    monthNames:
        ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
    dayNamesShort:
        ['D', 'L', 'M', 'M','J', 'V', 'S'],     
    editable: false,
    eventLimit: true, // allow "more" link when too many events
    eventRender: function(event, element) {
        //element.find(".fc-view-month td").after($("<td class=\"fc-day\"></td>").html("Prueba"));
        //element.find("div.fc-event-inner").prepend("<img src='" + event.imageurl +"' width='12' height='12'>");
        //element.find("div.fc-event-inner").prepend("<img src='../img/ico_calen_min_1.png' width='12' height='12' />");
        //element.find("table tbody td").prepend("<img src='../img/ico_calen_min_1.png' width='12' …
Run Code Online (Sandbox Code Playgroud)

jquery fullcalendar

4
推荐指数
1
解决办法
2665
查看次数

Bootstrap 3 - Popover div html

我基于这个例子:https: //jsfiddle.net/hL0pvaty/

但是popover必须包含一个html div,因此,我想要的是第一个和第二个链接之间的混合:https: //maxalley.wordpress.com/2014/08/19/bootstrap-3-popover-with-html -内容/

这是js代码:

$(document).on("click", ".show-popover-div", function (e) {
    $('[rel="popover"]').popover({
        container: 'body',
        html: true,
        content: function () {
            var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
            return clone;
        }
    }).click(function(e) {
        e.preventDefault();
    });
});
Run Code Online (Sandbox Code Playgroud)

这有效,但迫使我双击链接,只需点击一下即可.

有一件事,这个例子非常好,但我需要应用一些更改,我想要相同的,但从链接,我打开一个加载json文件的模态窗口,

json文件有一个打开popover的图像链接,就像你给我看的那样(我使用bootstrap-table来加载json文件)

这是json文件:

[
    {
        "col1": "<a href='#'>13560431</a>",
        "col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
    },
    {
        "col1": "<a href='#'>44560422</a>",
        "col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
    }
]
Run Code Online (Sandbox Code Playgroud)

这是使用bootstrap-table加载json文件的js代码:

$("#table-alert2").bootstrapTable({
    url: 'data-table-alert2b.json',
    columns: [{
        field: 'col1'
    }, {
        field: 'col2'   
    }, …
Run Code Online (Sandbox Code Playgroud)

bootstrap-popover bootstrap-table

4
推荐指数
1
解决办法
5062
查看次数

Sonarqube - 排除一组特定文件

我在前部的 Angular 应用程序中使用声纳。

我的应用程序中有很多 js 文件,但我需要 Sonar 忽略或排除以 .spec.js 结尾的 js 文件,这是 Angular 的测试单元。

我在“src/app”下有很多文件夹,里面有很多包含 .spec.js 文件的文件夹。

在Sonar(sonar-project.properties)的属性文件中,我想我可以使用:

sonar.test.exclusions=src/app/*.spec.js
Run Code Online (Sandbox Code Playgroud)

或者

sonar.exclusions=src/app/*.spec.js
Run Code Online (Sandbox Code Playgroud)

但我不确定,财产的价值是什么格式。

谢谢,

angularjs sonarqube

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

数据表 - 单元格字符串截断

我正在使用jQuery DataTables在表中显示数据,并使用AJAX链接将表内容加载到已嵌入对象的文件JSON

我有一个列,包括一个字符串,我想给格式,我也想剪切链并添加三个最后的点,以防万一超过字符限制.

我已经在几个场合用JavaScript函数完成了这个,但现在因为它将通过JSON加载我不知道怎么做

有什么建议?

jquery json datatables

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

Bootstrap 3 - 带子菜单的导航栏菜单

我有下一个菜单:

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle"><img src="img/ico_menu_off.png" /></a>
            <ul class="dropdown-menu">
                <li><a href="#">Links to Portals <span class="caret"></span></a></li>
                <li><a href="#">Links to Calculators <span class="caret"></span></a></li>
                <li><a href="#">Links to Tools <span class="caret"></span></a></li>
            </ul>
        </li>
        <li><a href="#"><img src="img/u2973.png" /></a></li>
        <li><a href="#"><img src="img/u2983.png" /></a></li>        
    </ul>      
</div>
Run Code Online (Sandbox Code Playgroud)

当我单击链接“门户链接”时,我想打开一个垂直子菜单,如图所示:

在此输入图像描述

怎样才能做到呢?

非常感谢。

twitter-bootstrap twitter-bootstrap-3

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

如何在输入获得焦点并更新日历时显示日期选择器日历

我有一个基于此 URL 的日历示例:http : //eonasdan.github.io/bootstrap-datetimepicker

这是 HTML 代码:

<div class="form-group col-xs-2 col-md-2">
    <label for="datebirth" class="control-label">Date of Birth</label>
    <div class="input-group date" id="datetimepicker1">
        <input type="text" class="form-control" id="date-birth" maxlength="10" />
        <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
        </span>
    </div>                      
</div>
Run Code Online (Sandbox Code Playgroud)

这是JS代码:

moment.locale('en', {
  week: { dow: 1 } // Monday is the first day of the week
});     

$("#datetimepicker1").datetimepicker({
    format: 'DD/MM/YYYY'
});

$("#date-birth").on("focus", function() {
    //open calendar
});
Run Code Online (Sandbox Code Playgroud)

我的日历必须在点击日历图标时打开(这没问题)并且当输入日期获得焦点后,如果我在输入日期字段中写入 fecha,则必须自动更新日历窗口。

在 URL 中,有一个关于 No Icon (input field only): 的示例,但我没有解决它。

谢谢您的帮助。

twitter-bootstrap twitter-bootstrap-3 bootstrap-datetimepicker

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