Question

我是angularjs的新手。我用ng-repeat创建了列表。只是我想隐藏列表中的选定列表元素：

我喜欢的HTML代码：

<ul>
 <li ng-repeat="profile in profileMenu">
  <div class="hederMenu" ng-hide="configureDisplay" ng-click="setProfile(profile.name)">
   <a class="anchor" style="width:100%" >{{profile.name}}</a>
  </div>
 </li>
</ul>

这是控制器代码

$scope.profileMenu = [{
        name : "My Profile"
    }, {
        name : "Configure"
    }, {
        name : "Logout"
    }
];

$scope.profile = "";
$scope.setProfile = function (test) {
    $scope.profileSelected = test;
    if ($scope.profileSelected == "Configure") {
        $location.path("/home/configure"); // if user click configure then this element will hide
        $scope.configureDisplay = true;
    }
    if ($scope.profileSelected == "My Profile") {
        $location.path("/home/dashboard");
        $scope.configureDisplay = false;
    }
    if ($scope.profileSelected == "Logout") {
        window.location.assign("http://mitesh.demoilab.pune/")
    }
    return $scope.profileSelected = test;
}

Answer 1

您必须在实际的“配置”配置文件项目上设置configureDisplay属性。不确定您在选择列表中做了什么，但我认为您在选择其他项目时会希望再次显示“配置”项。因此，在选择其他项目时，您还必须将“配置”项重置为false。

我稍微修改了你的例子。请注意，而不是在setProfile上传递profile.name，我正在传递配置文件对象。这只是简化了交互。

<ul>
 <li ng-repeat="profile in profileMenu">
  <div class="hederMenu" ng-hide="profile.configureDisplay" ng-click="setProfile(profile)">
   <a class="anchor" style="width:100%" >{{profile.name}}</a>
  </div>
 </li>
</ul>

$scope.setProfile = function (selectedProfile) {    
    //reset the items
    for (var i in $scope.profileMenu) {
        $scope.profileMenu[i].configureDisplay = false;
    }

    if (selectedProfile.name == "Configure") {
        $location.path("/home/configure"); // if user click configure then this element will hide
        selectedProfile.configureDisplay = true;
    }
    if (selectedProfile.name == "My Profile") {
        $location.path("/home/dashboard");
    }
    if (selectedProfile.name == "Logout") {
        window.location.assign("http://mitesh.demoilab.pune/")
    }
    return true;
}

Answer 2

你需要做一些改变，

 <li ng-repeat="profile in profileMenu">
  <div class="hederMenu" ng-hide="profile.configureDisplay" ng-click="setProfile(profile)">
   <a class="anchor" style="width:100%" >{{profile.name}}</a>
  </div>
 </li>

在控制器中，

$scope.setProfile = function (test) {
    $scope.profileSelected = test.name;
    if ($scope.profileSelected == "Configure") {
        $location.path("/home/configure");
        test.configureDisplay = true;

    }
    if ($scope.profileSelected == "My Profile") {
        $location.path("/home/dashboard");
        test.configureDisplay = false;

    }
    if ($scope.profileSelected == "Logout") {
        window.location.assign("http://mitesh.demoilab.pune/")
    }
    return  test;
}

我想只隐藏特定的列表元素

2 个答案: