如何在角度js模型中获得javascript结果

时间:2017-06-13 05:05:00

标签: html angularjs

Iam将结果日期绑定到基于该输入id的输入文本,但在角度脚本中输入值未保存在输入模型中

<input type="text" class="form-control" maxlength="10"
       ng-model="EmployeeSave.HijriDate" onclick="showCal2();"
       id="date-2" />

这是我在javascript函数中的输入字段我从

获得了价值
function setDateFields() {
        date1.value = cal1.getDate().getDateString();
        date2.value = cal2.getDate().getDateString();
    }

function showCal1() {
    if (cal1.isHidden()) cal1.show();
    else cal1.hide();
}

function showCal2() {
    if (cal2.isHidden()) cal2.show();
    else cal2.hide();
}

在setdatafields函数中我得到值date2.value,如何将此值绑定到ng-model EmployeeSave.HijriDate [ng-model]

4 个答案:

答案 0 :(得分:1)

您必须使用$ scope。喜欢这个

 $scope.date1.value = cal1.getDate().getDateString();

然后在输入

<input type="text" class="form-control" maxlength="10"  ng-model="date1.value" onclick="showCal2();" id="date-2" />

答案 1 :(得分:1)

如果使用Angular ng-click而不是点击,那肯定会更好。 HTML代码:

<input type="text" class="form-control" maxlength="10"
   ng-model="EmployeeSave.HijriDate" 
   ng-click="input2Clicked=!input2Clicked" />
<div ng-show="input2Clicked">THIS IS CAL2</div>

我认为您不需要id,因为控制器和视图现在已与ng-model连接。 控制器代码:

//writing the controllers like that I better for minifiying the js files
//if you already created the module in the model file  which I really recommend
//module file must be included before the controller's file in HTML
angular.module('myApp').controller('MyController',MyController);
//if you haven't created the module or the model file yet 
angular.module('myApp',[]).controller('MyController',MyController);
//then the let's stare writing the controller's code
MyController.$inject=['$scope']
function MyController($scope){

}

你能说明你从哪里得到日期吗?

答案 2 :(得分:0)

您需要在范围内设置所有内容并确保初始化父对象。像这样:

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

app.controller('myCtrl', function($scope) {
        //make sure parent objects are defined
        $scope.date2 = {};
        $scope.EmployeeSave = {};

        //make sure functions are in $scope
        $scope.setDateFields = function () 
        {
            $scope.date2.value = "myDate 1/1/17";
            //assign your date variables
            $scope.EmployeeSave.HijriDate = $scope.date2.value;
        }

        $scope.setDateFields(); //don't forget to call the function

});

以下是操作中的代码:https://jsfiddle.net/AKMorris/s3hn2ygw/

答案 3 :(得分:0)

使用$scope,与您的观点互动(ng-model)并返回控制器。

https://docs.angularjs.org/guide/scope

&#13;
&#13;
var app = angular.module("exApp",[]);

app.controller('ctrl', function($scope){
function setDateFields() {
        date1.value = cal1.getDate().getDateString();
        date2.value = cal2.getDate().getDateString();
        $scope.EmployeeSave.HijriDate = date2.value;
    }

/*function showCal1() {
    if (cal1.isHidden()) cal1.show();
    else cal1.hide();
}

function showCal2() {
    if (cal2.isHidden()) cal2.show();
    else cal2.hide();
}
*/
$scope.showCal2 = function() {    if (cal2.isHidden()) show();
    else hide();
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp">
<div controller="ctrl">
<input type="text" class="form-control" maxlength="10"
       ng-model="EmployeeSave.HijriDate" ng-click="showCal2();"/><br>
       {{EmployeeSave.HijriDate}}
       </div>
       </body>
&#13;
&#13;
&#13;