Question

我遇到此问题，我正在尝试使用ng-show进行下拉菜单。我的HTML看起来像：

<div class="dropdown" ng-mouseover="test()" ng-mouseleave="test2()" ng-click="test3()">
       <span>{{dropDownTimeEst}}</span>
       <i class="fa fa-caret-down bron-caret" aria-hidden="true"></i>
       <div class="dropdown-content" ng-show="showDropwDownTime">
           <a ng-repeat="item in times" ng-click="changeTimeEst(item)">{{item}}</a>
       </div>
</div>

关键是，无论何时我悬停或点击下拉框，它都会显示下拉内容。我设法成功打开下拉内容，但是当点击项目并触发changeTimeEst函数时，ng-show在范围内没有更新。

控制器代码：

$scope.test = function(){
    $scope.showDropwDownTime = true;
}
$scope.test2 = function(){
    $scope.showDropwDownTime = false;
}
$scope.test3 = function(){
    $scope.showDropwDownTime = true;
}
$scope.changeTimeEst = function(item){
    $scope.dropDownTimeEst = item;
    $scope.showDropDownTime = false; //This here does not do anything, but it should close the dropdown-content

有没有人有想法如何解决这个问题？

Answer 1

我认为您在视图中ng-show错误地将您的变量拼错了。或者你在控制器的$scope.changeTimeEst()功能中将其拼错了。我不确定你想要哪一个。

你有：

ng-show="showDropwDownTime"

我想你想要：

ng-show="showDropDownTime"

但是，如果您在将代码复制到StackOverflow时犯了错字，那么您很可能需要一些不同的东西。在这种情况下，我建议使用$scope.$apply()来触发摘要周期，并告诉视图您已更新控制器范围内的变量。

例如：

$scope.changeTimeEst = function(item) {
     $scope.dropDownTimeEst = item;
     $scope.showDropDownTime = false;
     $scope.$apply(); // This should update your view
}

Answer 2

您好我认为您的点击事件正在传播到外部div。所以，你应该停止传播这个事件。试试这个：

if let user = realm.objects(UserObject).filter(predicate).first {
        user.course = value
        do {
            try! realm.write {
                realm.add(user, update: true)
            }
        } catch let error as NSError {
            print("Something went wrong: \(error.localizedDescription)")
        }

    }

您可以看到我在您的锚定点击事件中添加了 $ event.stopPropagation（）。
希望，这解决了你的问题:)谢谢

单击ng-click，ng-show值不会在其内部更新

2 个答案: