我想只隱藏特定列表元素

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，而是傳遞profile對象。這只是簡化了交互。

<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; 
}