1
これはフォームです。ng-showディレクティブが機能しないのはなぜですか？
<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ディレクティブが機能していないのか理解できません。
次のコード参照してください：私はあなたがその機能を交換することをお勧めhttps://plnkr.co/edit/lftU1bPhL2kyWibjZQX6?p=preview –
を（と（あなたの問題に関係していなくても）一般的な改善と同じように、あなたの 'ng-click 'で簡単な否定式で呼び出すことができます。 例： '' もちろん、フォームを表示して非表示にすることを唯一の目的としている場合、 'addFormShow = true'を'ng-click'。 –