Angular:点击获得一个或li值

时间:2017-08-24 15:06:57

标签: angularjs

我有一个很好的简单导航丸,我想在导航点击

获得或li值
<div style="margin-left: 32px; text-align: center">
    <ul id="progress-view" class="nav nav-pills" >
        <li value="" class="active" style="margin-top: 15px">
            <a data-value="" data-toggle="tab">All</a>
        </li>
        <li data-value="505" value="0" style="margin-top: 15px">
            <a data-value="0" data-toggle="tab">New</a>
        </li>
        <li value="1" style="margin-top: 15px">
            <a data-toggle="tab">In Progress</a>
        </li>
        <li value="2" style="margin-top: 15px">
            <a data-toggle="tab">Waiting for answer</a>
        </li>
        <li value="3" style="margin-top: 15px">
            <a data-toggle="tab">Closed</a>
        </li>
    </ul>
</div>
谢谢!!

1 个答案:

答案 0 :(得分:1)

<ul id="progress-view" class="nav nav-pills" >
    <li value="" class="active" style="margin-top: 15px">
        <a data-value="" data-toggle="tab">All</a>
    </li>
    <li data-value="505" value="0" style="margin-top: 15px">
        <a data-value="0" data-toggle="tab"
           ng-click="clicked(0)">New</a>
    </li>
    <!-- etc... -->
</ul>

和你的控制器

$scope.clicked = function(val) {
    alert(val);
}

当然,更好的方法是采用有角度的方式:

$scope.tabs = [{
    title: "All",
    value: null
}, {
    title: "New",
    value: 0
}, {
    title: "In Progress",
    value: 1
}]; // etc

$scope.tabClicked = function(tab) {
    alert(tab.value);
}

在你看来:

<ul id="progress-view" class="nav nav-pills" >
    <li value="{{ tab.value }}" style="margin-top: 15px">
        <a data-value="{{ tab.value" data-toggle="tab"
           ng-click="tabClicked(tab)">{{ tab.title }}</a>
    </li>
    <!-- etc... -->
</ul>