Question

我的一个页面上有一堆日历控件。最初我复制了日历控件的示例代码，最终看起来像这样。（相关部分是is-open和ng-click）。

在视图中：

<input type="text" class="form-control show-text-cursor" disabled uib-datepicker-popup="{{ dateFormat }}" ng-model="myDate" is-open="openMyDate.opened"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="openMyDate()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

在控制器中：

$scope.openMyDate = function () {
    $scope.openMyDate.opened = true;
};

问题是我最终在我的$ scope上为我添加的每个日历控件添加了另一个函数（我最多14个）。这似乎超越了顶部，只需将布尔值设置为true。

所以我改成了它。

观点：

<input type="text" class="form-control show-text-cursor" disabled uib-datepicker-popup="{{ dateFormat }}" ng-model="myDate" is-open="myDateIsOpen"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="myDateIsOpen = true;"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

控制器：

//Initialization only
$scope.myDateIsOpen = false;

我不想开始直接将函数展开到我的ng-clicks中，但由于它是一个布尔赋值，所以它看起来更清晰。但我是Angular的新手，我想知道你的ng-click中是否还有一个函数调用会对性能产生负面影响？

Answer 1

你可以这样做：

<input type="text" class="form-control show-text-cursor" disabled uib-datepicker-popup="{{ dateFormat }}" ng-model="myDate" is-open="myDateIsOpen"/>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="myDateIsOpen = !myDateIsOpen;"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>

Answer 2

我没有遇到性能问题这样的问题。不过，还有其他选择。您也可以在哈希中跟踪这些变量，但是......并使用键名调用单个函数...例如，

$scope.openMyDate = function(which_one) {
    $scope.dates_open[which_one] = true;
}

ng-click只是ng-click="openMyDate('some_key_goes_here')

在ng-click中分配值

2 个答案: