0
私はdjangoテンプレートの中で角度検証を実行しようとしています。ブロックtemplatetagの内部では動作しないようです。しかし、それはそれの外で動作するようです。また、コンソールにエラーが表示されることもありません。djangoブロック要素の角度の不一致
私のコードは次のとおりです。
{% extends 'base.html' %}
{% load staticfiles %}
{% block head_block %}
<title>Item Create</title>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope, $http) {
$scope.validLevel = 0;
$scope.setSelectValid = function()
{
$scope.validLevel = 1;
}
});
</script>
{% endblock %}
{% block body_block %}
<div style="padding-left: 10px;padding-right: 10px">
<form id="id_form" action=""
class="form-horizontal ng-dirty ng-valid-required ng-valid ng-valid-nx-equal ng-scope" method="post"
ng-app="myApp" ng-controller="validateCtrl" name="myForm"
novalidate>
{% csrf_token %}
{% verbatim %}
<div class="row form-group">
<div class="col-md-6 col-md-offset-3">
<label for="id_level" class="control-label">Level</label>
</div>
<div class="col-md-6 col-md-offset-3">
<select ng-change="setSelectValid()" class="form-control" id="id_level" name="level" ng-model="level">
<option ng-repeat="x in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]" value="{{ x }}">Level {{ x }}</option>
</select>
</div>
</div>
<div class="row form-group">
<div class="col-md-6 col-md-offset-3">
<label for="id_item" class="control-label">Item Name</label>
</div>
<div class="col-md-6 col-md-offset-3">
<input type="text" class="form-control" id="id_item" name="item"
placeholder="Enter Item Name"
ng-model="item" ng-minLength="2" required>
<span ng-cloak style="color:red "
ng-show="myForm.item.$touched && myForm.item.$invalid ">
<p ng-show="myForm.item.$error.required ">Item name is required.</p>
<p ng-show="myForm.item.$error.minlength ">Should be at least 2 characters.</p>
</span>
</div>
</div>
<div class="row form-group ">
<div class="col-md-6 col-md-offset-3">
<label for="id_description" class="control-label ">Description</label>
</div>
<div class="col-md-6 col-md-offset-3">
<textarea class="form-control" id="id_description" name="description"
placeholder="Enter item description"
ng-model="description" ng-minLength=5 rows="5"
required></textarea>
<span ng-cloak style="color:red "
ng-show="myForm.description.$touched && myForm.description.$invalid ">
<p ng-show="myForm.description.$error.required ">Item description is required.</p>
<p ng-show="myForm.description.$error.minlength ">Should be at least 2 characters.</p>
<p ng-show="myForm.description.$error.maxlength ">Should be at most 50 characters.</p>
</span>
</div>
</div>
<div class="row form-group ">
<div class="col-md-6 col-md-offset-3 ">
<label for="id_item_value" class="control-label ">Value</label>
</div>
<div class="col-md-6 col-md-offset-3 ">
<input type="number" class="form-control"
id="id_item_value" name="value" placeholder="Item value"
ng-model="value" min="1" required>
<span ng-cloak style="color:red "
ng-show="myForm.value.$touched && myForm.value.$invalid ">
<p ng-show="myForm.value.$error.required ">Please enter Item value.</p>
</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-offset-3 col-md-6 ">
<button type="submit" id="button-info" class="btn btn-primary"
ng-disabled="myForm.$invalid || !validLevel">Create Item
</button>
</div>
</div>
{% endverbatim %}
</form>
</div>
{% endblock %}
"動作しないようです"とは何ですか?コードはテンプレートに追加されますか?それは実行されますか? *何かが起こるか? – Sayse
{%block body_block%} {%endblock%}にコードを埋め込むと、Angularは実行されません。 –