AngularJS - 根据点击的ID显示div内容

时间:2016-08-02 11:42:19

标签: javascript html angularjs ng-show

标题链接HTML

<ul ng-controller="pageRouteCtrl">
    <li ui-sref-active="active">
      <a ui-sref="home" class="" ng-click="getPageId('live-view')">LIVE</a>
    </li>
    <li>
        <a ng-click="getPageId('playback')">PLAYBACK</a>
    </li>
</ul>

控制

myApp.controller('pageRouteCtrl', function ($scope, $rootScope) {

    $scope.getPageId = function(id) {
        $rootScope.route = id;
    }

});

主页HTML

//should be visible on page load and until playback link is clicked
<div id="live-view" ng-show="route == 'live-view'">
SOME CONTENT
</div>

//will be hidden initially on page load
<div id="playback" ng-show="route == 'playback'">
SOME CONTENT
</div>

上述代码可根据点击的链接显示<div>内容。随后,当用户点击“直播”或“播放”时,将显示div内容。

如何在页面加载时默认显示live-view div?

1 个答案:

答案 0 :(得分:0)

在控制器中写下以下代码:

index.html
<input id="slider1" type="range" value="3" min="1" max="20" step="1" />