小编Mat*_*zza的帖子

我通过以下方式使用Angular-UI typeahead:

<input type="text" ng-model="myModel" typeahead="o.value as o.text for o in options | filter:$viewValue | limitTo:5" typeahead-editable="false" />

绑定到如下模型:

var options = [
    {"value": 1, "text": "value1"},
    {"value": 2, "text": "value2"},
    ...
];

它正确显示选项文本,但是当我选择一个项目时,它会在文本框中显示值.模型仅限于值(不是整个模型对象).

是否有可能在选择后在文本框内显示"文本"(而不是"值"),仍然只保持模型绑定到值(即:当我选择某个"文本"时,模型更新为"值" )？

我正在尝试构建一个Web应用程序,它应该在客户端使用Laravel作为RESTful后端API和AngularJS.我在Stackoverflow上阅读了有关该问题的所有其他帖子,但没有人肯定回答我的疑虑,至少,我没有找到明确的源代码示例.

例如...

我应该开发两个完全不同的应用程序,一个使用Laravel的后端,另一个是纯客户端,使用AngularJS？但在这种情况下:如何通过单个域(或虚拟主机)处理它们？

或者我应该在Laravel中创建AngularJS模板,在"views"文件夹中并从中调用Laravel服务？我怀疑这是最好的方法:在这种情况下,后端并没有完全与前端实现分离.

另外,如何正确处理路由？我的意思是:我想管理AngularJS路线,如菜单/页面导航,只调用Laravel来检索数据并填充我的视图.按照这篇文章的建议移动"public"文件夹(Angular JS + Laravel 4:如何为生产模式编译？)可能有所帮助？

提前填写建议,例子......

我正在尝试使用登录表单(用户/密码文本输入+ 1按钮)实现一个简单的页面.我想将这种形式修复到离子含量的底部.但它不起作用.

HTML:

<ion-view hide-nav-bar="true">
<ion-content padding="true">

    <img class="logo" src="img/logo.jpeg" />

    <div class="login-form">
        <div class="list">
            <label class="item item-input light-text-input">
                <input type="text" placeholder="user" ng-model="user">
            </label>
            <label class="item item-input light-text-input">
                <input type="text" placeholder="password" ng-model="password">
            </label>
        </div>

        <div class="row">
            <div class="col">
                <button class="button button-block button-energized">Login</button>
            </div>
            <div class="col">
                <button class="button button-block button-positive">FB Login</button>
            </div>
        </div>

        <p class="text-center"><a href="#/app/forgot-password">Forgot password</a></p>
    </div>

</ion-content>

我想设置为"修复"div.login-form.

使用以下CSS不起作用:

{
    position: fixed;
    bottom: 20px;
}

此外,有位置:固定输入文本似乎不再可编辑.

在Ionic中,是否可以将部分内容固定到底部？谢谢!

是否可以在读取数据和避免第二次服务器读取之前以编程方式设置KendoUI DataSource的sort参数？范围是为特定用户交互设置默认排序.怎么样？

这是我想要做的一个例子,因为答案没有达到目的(或者我可能不理解事情如何运作).

我用一个初始排序定义了一个Kendo DataSource:

var datasource = new kendo.data.DataSource({
    parameterMap: function (inputParams, operation) {
        return JSON.stringify(inputParams)
    },
    // default sort
    sort: [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ]
});

此DataSource绑定到Kendo网格:

var grid = $("element").kendoGrid({
    dataSource: datasource   
});

然后我有一个按钮,在DataSource上调用"read"并使用第一页数据填充网格:

$("#btn").bind("click", function(e) {
    datasource.page(1);
}); 

这样,在单击按钮后,用户获取按"field_1"和"field_2"排序的数据,并且网格在列标题上显示此排序.然后,用户可以通过单击列标题以任何方式重新排序数据.

我想要做的是将默认排序重置为初始值,如DataSource声明中所定义,在列标题上再次显示它,而不再创建新的DataSource.

就像是:

$("#btn").bind("click", function(e) {
    datasource.sort = [
        {field: "field_1", dir: "asc"},
        {field: "field_2", dir: "asc"}
    ]; 
    datasource.page(1);
}); 

所提供的解决方案似乎没有达到这一点(我仍然不明白为什么我会因为一个似乎不是那么微不足道并且应该由框架解决的合法问题而失去声誉点).

请告诉我我错了(我不担心失去声誉 - 我想了解如何解决问题).

我想知道是否可能,使用角度一次性绑定,在模型更新后完全重新渲染视图/模板,也可以通过重新编译模板.例如,在按下按钮时,可能在反应方式中工作:我更新模型并明确强制更新视图.基本上这就是我想要实现的目标:

// controller
angular.module('app', []).controller('AppCtrl', function($scope) {
    $scope.items = [
        {id: 1},
        {id: 2},
        {id: 3}
    ];

    $scope.addAndRefresh = function() {
        $scope.items.push({id: 4});
        // manually call render logic here???
    };
});


<!-- HTML template -->
<div ng-repeat="item in ::items">
    {{item.id}}
</div>
<button ng-click="addAndRefresh()">Add</button>

通过单击"添加"按钮,我想刷新视图以查看新添加的项目.

我有以下场景:

在我的页面中,我有一个网格(带分页)绑定到数据源.当我点击"Extract"按钮时,网格会被填充(通过Web服务读取分页数据).然后我通过网格分页选择"第2页".再次调用Web服务以返回数据.

现在:我想再次点击"Extract",重新加载并在第一页上显示数据.我不确定哪种方式最好.

我想只调用一次服务(带输入参数),并在网格中重置分页索引.

我现在使用以下代码:

$("#btnExtract").bind("click", function(e) {
    var grid = $("#section-table").data("kendoGrid");
    grid.dataSource.read( {parameter: "value"} );
    grid.dataSource.page(1);
});

但实际上它会对服务进行两次调用.

使用AngularJS,是否可以使用"onload"参数来触发在"子"控制器(由包含的模板调用的控制器)中定义的函数？

例:

<!-- parent container -->
<div ng-include="'/path/template.html'" onload="childOnLoad()"></div>

<!-- template.html -->
<div ng-controller="childController">   
    <p ng-bind="txt"></p>
</div>

<!-- childController.js -->
app.controller('childController', function($scope) {    
    $scope.txt = "Test text";

    $scope.childOnLoad = function() {
        alert("Loaded!");
    };  
});

是否有意义？或者我应该简单地调用childController中的函数,如下所示？

<!-- childController.js -->
app.controller('childController', function($scope) {    
    $scope.txt = "Test text";

    $scope.childOnLoad = function() {
        alert("Loaded!");
    };

    $scope.childOnLoad();   
});

我想测试一个我写的过滤函数,它返回一个使用Intl.DateTimeFormat格式化的日期('en-GB',options):

// module "date.js"
export default function (dateISOString) {
    const options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        timeZone: 'UTC'
    };
    let d = new Date(dateISOString);
    return new Intl.DateTimeFormat('en-GB', options).format(d);
};

这是我的测试,使用Jest:

import date from '@/filters/date';
describe('date', () => {
    it('should format the date into dd/mm/yyyy', () => {
        expect(date('2014-02-11')).toEqual('11/02/2014');
    });
});

但它失败了:

Expected value to equal:
  "11/02/2014"
Received:
  "02/11/2014"

是否可以使用Jest测试(或模拟)Intl API？看起来问题是由于Impl API在浏览器和Node环境中的不同行为.

我有以下情况(使用KendoUI):

我有一个绑定到数据源的网格.当我在网格中选择一行时,我调用其"更改"事件以获取所选的dataItem e通过其他HTML元素显示其值.

类似于以下内容:

$("grid-element").kendoGrid({
    change: setElements
});

function setElements() {
    var grid = $("#grid-element").data("kendoGrid");
    var selectedItem = grid.dataItem(grid.select());

    $("#span-field1").text(selectedItem.field1);
    $("#span-field2").text(selectedItem.field2);
    $("#span-field3").text(selectedItem.field3);
}

我的问题是:是否可以通过MVVM或更好的KendoUI模型绑定解决方案实现相同的目标？

我不清楚如何使用Appgyver Steroids"构建"UI.看起来它只使用Ionic的CSS端来渲染视图,而不是javascript端.这种方式不可能设计具有离子角度指令的UI.我错了吗？所以我的问题是:在Steroids应用程序中设计视图的正确方法是什么？只是通过HTML和Ionic CSS类？是否有指南,也许有例子？是否可以简单地包含Ionic javascript并使用其指令？一些缺点？