javascript - 如果 JavaScript 对象属性为空字符串

Question

我正在 Angular JS 中制作一个表单，并希望禁用提交按钮(ng-disabled)，直到与表单关联的模型全部填充，这意味着字符串不再为空并且整数不再为零。

处理数字很容易，但是其他不是价格的模型都存储在一个对象中，并且都是空字符串。我希望有一个简单的单行解决方案，可以在 ng-disabled 中使用来测试该对象是否不再包含其任何属性的空字符串。

无论如何，这里有一些代码可以清楚地说明:

<div class="form-group">
    <label for="pickupDate" style="margin-top: 10px;">Pickup Date</label>
    <select name="pickupDate" ng-model="Oproperties.pickupDate">
        <option value="Tuesday">Tuesday - November 22nd</option>
        <option value="Wednesday">Wednesday - November 23rd</option>
        <option value="Thursday">Thursday - November 24th</option>
    </select>
</div>
<div class="form-group clear-fix">
    <div class="form-group" style="width:45%;float:left;">
        <label for="firstName">First Name</label>
        <input type="text" class="form-control" ng-model="Oproperties.firstName" placeholder="Jill">
    </div>
    <div class="form-group" style="width:45%;float:right;">
        <label for="lastName">Last Name</label>
        <input type="text" class="form-control" ng-model="Oproperties.lastName" placeholder="Smith">
    </div>
</div>
<div class="form-group">
    <label for="phone">Phone</label>
    <input type="text" class="form-control" ng-model="Oproperties.phone" placeholder="Phone Number">
</div>
<div class="form-group">
    <label for="email">Email</label>
    <input type="text" class="form-control" ng-model="Oproperties.email" placeholder="yourname@email.com">
</div>
<div class="form-group" ng-repeat="(key, value) in breads | groupBy: 'Type'">
    <label class="itemTitle">@{{key}}</label>
    <div ng-repeat="bread in value">
        <label for="@{{bread.Name}}">@{{bread.Name}}</label>
        <select name="@{{bread.Name}} quantity" ng-options="quantityOption as quantityOption.value for quantityOption in quantityOptions track by quantityOption.value" ng-model="bread.quantity" ng-change="calculate()"></select>
        </select>
        <p class="price">@{{bread.Price|currency}} @{{bread.details}}</p>
    </div>
</div>
<button ng-disabled="Oproperties.containsEmptyString()&&totalPrice===0" ng-click="submitOrder()" class="btn btn-default">Submit</button>

该对象看起来像:

 $scope.Oproperties=
    {
    pickupDate:"",
    firstName:"",
    lastName:"",
    phone:"",
    email:""
    }

所以基本上，我会做什么来代替目前只是概念性填充的 Oproperties.containsEmptyString() ？

Answer 1

您可以将所有输入包装在名为 myForm 的 form 元素中，然后将 required 属性添加到您的输入，然后设置

ng-disabled="myForm.$invalid"

到您的提交按钮。