AngularJS-从ng-repeat获取当前对象

时间:2018-06-28 23:51:30

标签: javascript angularjs angularjs-ng-repeat angular-ngmodel angularjs-material

我正在为我们的应用程序处理用户配置文件“卡片”类型的事情。这个想法是利用AngularJS材质库为非管理员用户创建一个简单的界面,以管理分配给他们的其他用户。

我正在执行ng-repeat来提取这些卡的数据,然后为其生成标记,就像这样:

<!-- language: lang-js -->
<div class="col-md-6 md-padding float-left" ng-repeat="user in allUsers">
    <md-toolbar class="row col-md-12 md-hue-5 md-dense px-0">
        <div class="md-toolbar-tools">
            <span class="col-md-10">{{ user.name }}</span>
            <md-button id="managedUserDetails" type="submit" ng-click="null" class="md-fab" aria-label="Click to view profile">
                <md-icon md-svg-src="/images/svg/action/ic_open_in_new_48px.svg"></md-icon> 
            </md-button>
        </div>
    </md-toolbar>

    <div class="row col-md-12 border border-dark">
        <div class="row col-md-12">
            <md-input-container class="md-block col-md-6" flex-gt-xs>
                    <label>Name:</label>
                    <input ng-model="user.name" class="detailDisabled" disabled>
            </md-input-container>

//code continues for other bits, and yes, the tags are closed :)

我的问题是关于 md-button 元素的。在其中,我想使用一个函数来显示该用户的扩展视图,但是为此,我需要按钮所在的特定用户卡中的数据。然后,我可以使用该数据来填充扩展视图

所以,问题是

是否可以告诉Angular“将您用来生成父元素的数据告诉我?”

如果没有,我将不得不做一些思考,因为我现在能想到的就是.......非优雅的解决方案:)

2 个答案:

答案 0 :(得分:1)

您可以使用ng-init = "someFunction(user)"

<div class="col-md-6 md-padding float-left" ng-repeat="user in allUsers"
     ng-init = "someFunction(user)">

答案 1 :(得分:1)

您可以将用户对象直接传递到ng-click,使用ng-init会在元素生成时始终调用该方法,

<md-button id="managedUserDetails" ng-click="getAdvancedView(user)" class="md-fab" aria-label="Click to view profile">
   <md-icon md-svg-src="/images/svg/action/ic_open_in_new_48px.svg"></md-icon> 
</md-button>

在控制器上,您可以在按钮单击事件上访问整个用户对象,

$scope.getAdvancedView = function(user) {
   console.log(user.name);
}