ng-showの利用

ng-showを使ってHTML要素の表示を制御していきます。

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="utf-8">
    <title>practice Angular.js</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
    <div>
        <label>Name:</label>
        <input type="text" ng-model="yourName" placeholder="Enter a name here">
        <hr>
        <h1 ng-show="!!yourName">Hello, {{yourName}}!</h1>
    </div>
</body>
</html>

まず、テキストボックスに入力したテキストは、yourNameという変数に入ります。

次に、ng-show="!!yourName"の部分で、yourNameが空ではない場合に当該の要素を表示するようにしています。これでテキストボックスに何かしらのテキストが入力されると、Hello, {{yourName}}!が表示されるようになります。

また、一度入力した文字をすべて消去すると、再度表示されなくなります。

AngularJSでデータが入力されている場合に要素を表示する方法

ng-showの利用