angularjs – Angular-UI多个datepickers内幕表单控制器

发布时间：2020-12-17 17:59:37 所属栏目：安全来源：网络整理

导读：我正在创建一个带有多个angular-ui datepickers和一些输入数据的表单. 对于日期选择器,我创建了一个控制器和一个父表单控制器,如下面给出的示例.表单控制器具有包含日期??选择器日期的模型. JS： var app = angular.module('app',['ui.bootstrap']);app.cont

我正在创建一个带有多个angular-ui datepickers和一些输入数据的表单.
对于日期选择器,我创建了一个控制器和一个父表单控制器,如下面给出的示例.表单控制器具有包含日期??选择器日期的模型.

JS：

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

app.controller('dateCntrl',function($scope,$timeout){
    $scope.open = function() {
        $timeout(function() {
            $scope.opened = true;
        });
    };
});

app.controller('formCntrl',$http){
    $scope.model = {name:'',startDate:'',endDate:''};
});

HTML：

<form ng-controller="formCntrl">
    <input type="text" id="name" placeholder="Name" ng-model="model.name" />
    <div ng-controller="dateCntrl">
        <input datepicker-popup="dd-MMMM-yyyy"  ng-model="model.startDate" id="startDate" type="text" />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>
    <div ng-controller="dateCntrl">
        <input datepicker-popup="dd-MMMM-yyyy" ng-model="model.endDate" id="endDate" type="text" />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>
</form>

>我是否正确地为datepicker设置了一个单独的控制器.这将作为所有日期输入的通用控制器
>如果是,是否可以使用通用方法将datepicker控制器中的数据绑定回父控制器中的模型日期(本例中为model.startDate,model.endDate).
>有没有其他方法可以解决这个问题.

感谢致敬.

解决方法

应该阅读有关 scope inheritance的更多信息

可以使用$parent访问父作用域值

<form ng-controller="formCntrl">
    <input type="text" id="name" placeholder="Name" ng-model="model.name" />
    <div ng-controller="dateCntrl">
        <input datepicker-popup="dd-MMMM-yyyy"  ng-model="$parent.model.startDate" id="startDate" type="text" />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>
    <div ng-controller="dateCntrl">
        <input datepicker-popup="dd-MMMM-yyyy" ng-model="$parent.model.endDate" id="endDate" type="text" />
        <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
    </div>
</form>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!