为什么ng-show指令不起作用？

Question

这是表格。

    <div class="row" ng-controller="contactsCtrl">

<form ng-show="addFormShow">
    <h3>Add Contact</h3>
    <!-- Add form -->
    <div class="row">
        <div class="large-6 columns">
            <label>Name:
                <input type="text" ng-model="name" placeholder="Contact Name" required />
            </label>
        </div>
        <div class="large-6 columns">
            <label>Email:
                <input type="text" ng-model="email" placeholder="Contact Email" required />
            </label>
        </div>
    </div>
    <div class="row">
        <div class="large-6 columns">
            <label>Company:
                <input type="text" ng-model="company" placeholder="Company Name" required />
            </label>
        </div>
        <div class="large-6 columns">
            <label>Work Phone:
                <input type="text" ng-model="work_phone" placeholder="Work Phone" required />
            </label>
        </div>
    </div>
    <div class="row">
        <div class="large-6 columns">
            <label>Mobile Phone:
                <input type="text" ng-model="mobile_phone" placeholder="Mobile Phone" required />
            </label>
        </div>
        <div class="large-6 columns">
            <label>Home Phone:
                <input type="text" ng-model="home_phone" placeholder="Home Phone" required />
            </label>
        </div>
    </div>
    <div class="row">
        <div class="large-6 columns">
            <label>Street Address:
                <input type="text" ng-model="street_address" placeholder="Street Address" required />
            </label>
        </div>
        <div class="large-6 columns">
            <label>City:
                <input type="text" ng-model="city" placeholder="City" required />
            </label>
        </div>
    </div>
    <div class="row">
        <div class="large-6 columns">
            <label>State:
                <input type="text" ng-model="state" placeholder="State" required />
            </label>
        </div>
        <div class="large-6 columns">
            <label>Zip Code:
                <input type="text" ng-model="zipcode" placeholder="Zip Code" required />
            </label>
        </div>
    </div>
    <div class="row">
        <div class="large-12 columns">
            <input type="submit" value="Add Contact" class="button" />
        </div>
    </div>
</form>

<div class="large-10 columns">
    <h3>Your Contacts (3)</h3>
    <table>
        <thead>
            <tr>
                <th width="200px">Name</th>
                <th width="200px">Company</th>
                <th width="25%">Email</th>
                <th width="25%">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contacts">
                <td><a href="#">{{contact.name}}</a></td>
                <td>{{contact.company}}</td>
                <td>{{contact.email}}</td>
                <td><a class="button tiny" ng-click="showEditForm(contact)">Edit</a>
                    <a class="button tiny alert" ng-click="removeContact(contact)">Delete</a></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="small-12 large-2 columns">
    <a class="button large" ng-click="showAddForm()">+</a>
</div>
</div>

这是控制器。

    'use strict';

angular.module('myContacts.contacts', ['ngRoute','firebase'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/contacts', {
    templateUrl: 'contacts/contacts.html',
    controller: 'contactsCtrl'
  });
}])

.controller('contactsCtrl', ['$scope', '$firebaseArray', function($scope,$firebaseArray) {
    var ref = new Firebase('https://mycontacts-1bb2d.firebaseio.com/contacts');

    $scope.contacts = $firebaseArray(ref);
    $scope.showAddForm = function(){
        $scope.addFormShow = true;
    }
}]);

这是非常简单的代码。它应该在用户点击“+”按钮时显示表单。但我无法弄清楚为什么ng-show指令不起作用。

Answer 1

它适用于您的代码，检查您是否在代码中正确添加了ng-controller。

<强>样本

＆＃13;

＆＃13;

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

myApp.controller('contactsCtrl', function contactsCtrl($scope) {
 $scope.showAddForm = function(){
    $scope.addFormShow = true;
}
});

＆＃13;

<!DOCTYPE html>
<html ng-app="ReqWebApp">

<head>
    <meta charset="UTF-8">
    <title>New Request</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="contactsCtrl">
    <form ng-show="addFormShow">
<h3>Add Contact</h3>
<!-- Add form -->
<div class="row">
    <div class="large-6 columns">
        <label>Name:
            <input type="text" ng-model="name" placeholder="Contact Name" required />
        </label>
    </div>
    <div class="large-6 columns">
        <label>Email:
            <input type="text" ng-model="email" placeholder="Contact Email" required />
        </label>
    </div>
</div>
<div class="row">
    <div class="large-12 columns">
        <input type="submit" value="Add Contact" class="button" />
    </div>
</div>
</form>
<div class="small-12 large-2 columns">
    <a class="button large" ng-click="showAddForm()">+</a>
</div> 
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

Answer 2

代码对我来说很好。我想你可能在添加控制器时遇到了一些小错误。请参阅以下代码

MotionEvent.ACTION_DOWN