Question

我正在处理一个列表（＆lt; ul＆gt;），它在一个页面上的不同ng-repeat-iterations中多次使用。

第一个列表项是由ng-repeat生成的，（second-）last list-item包含一个span，当点击它时，应该导致最后一个list-item（隐藏在页面加载上）显示

                  <ul ng-repeat="list in lists">
                    <li ng-repeat="item in getItems(a,b)">{{item}} 
                    </li>
                    <li>
                        <span style="cursor:pointer;" ng-click="display_item_form($event)" class="glyphicon glyphicon-plus"></span>
                    </li>
                    <li style="display: none;" class="item-form">
                      content to be shown on 'button' press
                    </li>
                  </ul>

除了传递$ event，我尝试传递＆＃39;这个＆＃39;，但结果总是未定义或异常

    $scope.display_item_form = function($event){
//         alert($(it).parent().siblings('.item-form').attr('type'));//passing this instead of $event: result: undefined
            alert($($event.target).attr('type')); //undefined
//         $(it).parent().parent().children('.item-form').show();
//         $('.item-form').show(); // this works, but i only want .item-form inside the current <ul> to be shown

    }

Answer 1

您可以在HTML中完全执行此类操作。

首先没有定义

showItem，所以它不会显示。单击按钮后，切换按钮（在这种情况下将其设置为true），然后显示。

var app = angular.module("app", []);

app.controller("TestCtrl", ['$scope', function ($scope) {
   
  $scope.list = [{ val: 1 },{ val: 2 },{ val: 3 },{ val: 4 },{ val: 5 }];

$scope.list2 = [{ val: 1 },{ val: 2 },{ val: 3 },{ val: 4 },{ val: 5 }];
  
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">

<div data-ng-controller="TestCtrl">
    <ul>
        <li ng-repeat="item in list">{{item.val}} </li>
        <li data-ng-click="showList1Item=!showList1Item"><span style="cursor:pointer;">+</span></li>
        <li data-ng-show="showList1Item">last item</li>
    </ul>

    <ul data-ng-controller="TestCtrl">
        <li ng-repeat="item in list2">{{item.val}} </li>
        <li data-ng-click="showList2Item=!showList2Item"><span style="cursor:pointer;">+</span></li>
        <li data-ng-show="showList2Item">last item</li>
      </ul>
    </div>
</div>

Answer 2

您可以尝试在上一个li的{{1}}语句中加载和引用时在$ scope上创建变量。

请注意： ng-if从DOM中删除条件元素。 ng-if将ng-show应用于DOM中的条件元素。

如果您需要重新初始化可能位于条件元素内的任何子组件，请务必记住这一点。

希望这有帮助！： - ）

display: none;

Answer 3

我找到了解决方案：

angular.element（）;

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.0"
    defaultConfig {
        applicationId "com.app.test"
        minSdkVersion 24
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:26.+'
    testCompile 'junit:junit:4.12'
    // App's dependencies, including test
    compile 'com.android.support:support-annotations:22.2.0'

    // Testing-only dependencies
    androidTestCompile 'com.android.support.test:runner:1.0.0'
    androidTestCompile 'com.android.support.test.espresso:espresso-core:3.0.0'
}

AngularJS：使用ng-click时获取兄弟姐妹

3 个答案: