在使用ng-options生成的Select Tag中设置特定值

时间:2014-02-12 09:20:41

标签: javascript angularjs angularjs-scope

我每天,每月和每年都有3次降价。接下来是一个输入标签,其格式为“DD-MM-YYYY”。我想实现的是交换功能,在点击按钮时,输入标签中的日期应设置为3个选择标签,反之亦然。对我来说,下拉列表中的日期是正确读取并在文本框中设置,但即使将文本框中的日期分配给下拉模型,也不会从文本框中选择日期。

我的HTML看起来像这样

 <select class="day" name="bday" ng-model="user.bday" age-validate ng-options="day for day in getNumber(1,31,1)"><option value="">DD</option></select>
 <select class="month" name="bmonth" age-validate ng-model="user.bmonth" ng-options="day for day in getNumber(1,12,1)"><option value="">MM</option></select>
 <select class="year" name="byear" age-validate ng-model="user.byear" ng-options="day for day in getNumber(2014,100,-1)"><option value="">YYYY</option></select>
 <input ng-model="social.bdob" readonly="" type="text" /> 
 <span class="toggle" ng-click="swapDOB('bday','bmonth','byear','bdob')"></span>

控制器代码是 -

    $scope.getNumber = function (start, range, order) { // ascending order = 1, descending order = -1
        var arr = new Array(range);
        for (var i = start, j = 0; range--; i = i + order)
            arr[j++] = i;
            return arr;
    }

    $scope.swapDOB = function (pDay, pMonth, pYear, pDob) {
        var temp = $scope.social[pDob];
        $scope.social[pDob] = $scope.user[pDay] + "-" + $scope.user[pMonth] + "-" + $scope.user[pYear]
    //The below logic needs to be changed to some how select the option tag and display the assigned value
        $scope.user[pDay]= temp.split("-")[0];
        $scope.user[pMonth] = temp.split("-")[1];
        $scope.user[pYear] = temp.split("-")[2];
    }

1 个答案:

答案 0 :(得分:0)

您无需在swap()中传递字符串。这是我将建议您的HTML

的更改
<span class="toggle" ng-click="swapDOB()"></span>

我想你有办法区分何时在你的实现中设置选择输入或文本框,因为在某些时候,其中一个输入可能是未定义的(或NaN)。

要从选择输入设置文本输入的模型,可以使用

$scope.social.blob = $scope.user.bday + "-" + $scope.user.bmonth + "-" + $scope.user.byear;

并设置文本输入的选择输入

var temp = $scope.social.blob.split("-");
$scope.user.bday= parseInt(temp[0]);
$scope.user.bmonth = parseInt(temp[1]);
$scope.user.byear = parseInt(temp[2]);

这是展示这些内容的Fiddle