当angularjs手风琴只打开

时间:2018-06-01 07:42:54

标签: javascript angularjs bootstrap-accordion angularjs-bootstrap

您好我正在使用angularjs ui bootstrap手风琴。在这里,我想在用户点击手风琴时调用一个函数并获取用户

这是代码,请提前帮助我



$scope.load_userdata= function(user_id) {
    	console.log(user_id);
    }

<uib-accordion close-others="oneAtATime">
		<div uib-accordion-group class="panel-default" ng-repeat="user in users">
		   <uib-accordion-heading ng-click="load_userdata(user.id)">
			    <div class="table">
			    	<div style="width: 50%">
			    			 @{{user.name}} 			         
			    	</div>
			    	<div>
				      Load user data
				     </div>
				   </div>
	      </uib-accordion-heading>
		</div>
</uib-accordion>
&#13;
&#13;
&#13;

数据并显示

1 个答案:

答案 0 :(得分:1)

我真的不明白问题所在。我将模板复制到下面的代码段中,并添加了一个带有工作示例的简单控制器。

不包括角度引导模块,因此您无法获得正确的渲染。但它向您展示了如何在控制器中定义函数以使模板正常工作。

&#13;
&#13;
private static boolean isFirstOnCreate = true;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(getLayoutResource());

    if (isFirstOnCreate && savedInstanceState != null) {
        startActivity(getPackageManager().getLaunchIntentForPackage(getPackageName()));
        finishAffinity();
    }
    isFirstOnCreateInvocation = false;
&#13;
function ctrl($scope) {
    // dummy users data for the snippet purpose
    $scope.users = [{
            name: 'Joe',
            id: '1', 
            data : 'Married to Jane',
        },
        {
            name: 'John',
            id: '2',
            data : 'Has 3 children',
        },
        {
            name: 'Jack',
            id: '3',
            data : 'Owns a boat',
        },
        {
            name: 'Bob',
            id: '4',
            data : 'Speaks swedish',
        }
    ];

    $scope.load_userdata = function(user_id) {
        console.log("Loading user#%s data", user_id);
        
        // looking for the right user : 
        let user = $scope.users.find(x => x.id === user_id);

        // and toggling the dataLoaded property in the user object
        user.dataLoaded = true;        
    }
}
&#13;
&#13;
&#13;