6

まず、はい、これをグーグルで検索してみましたが、AngularJSに関する情報を見つけるのはまだ難しいです。

フォームで押されたボタンに基づいてセクションを開くという簡単なタスクを実行したいと思います。いつでも1つのセクションだけを開いて、おそらくデフォルトのセクション（まだ決めていません）にしたいです。また、クリックしたボタンがブートストラップ用に「btn-primary」に分類されると便利です。これがhtmlです

<form>
    <input type="button" id="show-section1" value="Section 1" />
    <input type="button" id="show-section2" value="Section 2" />
    <input type="button" id="show-section3" value="Section 3" />
</form>
<section id="section1">blah</section>
<section id="section2">blah2</section>
<section id="section3">blah3</section>

jQueryでは、次のようなことを行います（単純化されており、説明するだけの最善の解決策ではありません）。 

$('section').hide();
$('#show-section1').click(function() {
    $('section').hide();
    $('#section1').show();
});
etc

これは以前に一度行ったことがありますが、その方法を思い出せません。ただし、コードが数行しかなかったことを覚えています。

4

3 に答える 3

7

一度に1つだけ必要な場合は、これを使用できます：http: //jsfiddle.net/jHhMv/3/

JS：

'use strict';

var App=angular.module('myApp',[]);

function Ctrl($scope){
    var section = 1;

    $scope.section = function (id) {
        section = id;   
    };

    $scope.is = function (id) {
        return section == id;
    };
}

HTML：

<div ng-controller="Ctrl">
<form>
    <input type="button" id="show-section1" value="Section 1" ng-click="section(1)" ng-class="{'btn-primary': is(1)}" />
    <input type="button" id="show-section2" value="Section 2" ng-click="section(2)" ng-class="{'btn-primary': is(2)}" />
    <input type="button" id="show-section3" value="Section 3" ng-click="section(3)" ng-class="{'btn-primary': is(3)}" />
</form>
<section id="section1" ng-show="is(1)">blah</section>
<section id="section2" ng-show="is(2)">blah2</section>
<section id="section3" ng-show="is(3)">blah3</section>
</div>
于 2013-03-06T12:50:27.080 に答える
6

見てみましょうhttp://jsfiddle.net/mahbub/jHhMv/

<div ng-controller="Ctrl">
<form>
    <input type="button" id="show-section1" value="Section 1" ng-click="section1=!section1" />
    <input type="button" id="show-section2" value="Section 2" ng-click="section2=!section2" />
    <input type="button" id="show-section3" value="Section 3" ng-click="section3=!section3" />
</form>
<section id="section1" ng-show="section1">blah</section>
<section id="section2" ng-show="section2">blah2</section>
<section id="section3" ng-show="section3">blah3</section>
</div>


'use strict';

var App=angular.module('myApp',[]);

function Ctrl($scope){

}
于 2013-03-06T12:42:49.550 に答える
3

たくさんの方法。それらの1つ（AngularUIを使用）：

HTML：

<div ng-controller="AppController">

    <button ng-click="setActive('section1')" ng-class="{'btn btn-primary': active.section1}">Section 1</button>
    <button ng-click="setActive('section2')" ng-class="{'btn btn-primary': active.section2}">Section 2</button>
    <button ng-click="setActive('section3')" ng-class="{'btn btn-primary': active.section3}">Section 3</button>

    <section id="section1" ui-toggle="active.section1">blah</section>
    <section id="section2" ui-toggle="active.section2">blah2</section>
    <section id="section3" ui-toggle="active.section3">blah3</section>

</div>

CSS：

.ui-show {
  opacity: 1;
  transition: all 0.5s ease;
}
.ui-hide {
  opacity: 0;
  transition: all 0.5s ease;
}

JS：

app.controller('AppController',
  function($scope) {
    $scope.active = {section1: true};
    $scope.setActive = function(section){
      $scope.active = {};
      $scope.active[section] = true;
    };
  }
);

プランカー

于 2013-03-06T12:47:52.583 に答える