Angularjs 如何将项目添加到受列表影响的下拉列表中_Angularjs_Checkbox_Ionic Framework

Angularjs 如何将项目添加到受列表影响的下拉列表中

angularjs checkbox ionic-framework

Angularjs 如何将项目添加到受列表影响的下拉列表中,angularjs,checkbox,ionic-framework,Angularjs,Checkbox,Ionic Framework,我已经级联了下拉列表。我试图将新的输入作为对象{'name'：'pizzaName'，'size'：['availableSizes']}添加到现有列表中，用户使用该列表选择比萨饼及其可用大小。所面临的问题是选择复选框，因为它会将它们全部选中，并且不会更新到列表中。单击“添加”按钮时，下拉框和复选框都会指定一些值，并在下拉框和复选框中显示空白 Html: Enter the new Pizza Name: <input type="text" ng-model="newName

我已经级联了下拉列表。我试图将新的输入作为对象{'name'：'pizzaName'，'size'：['availableSizes']}添加到现有列表中，用户使用该列表选择比萨饼及其可用大小。所面临的问题是选择复选框，因为它会将它们全部选中，并且不会更新到列表中。单击“添加”按钮时，下拉框和复选框都会指定一些值，并在下拉框和复选框中显示空白

Html:

 Enter the new Pizza Name:
    <input type="text" ng-model="newName">
    Select size availabel:
    <ul>
      <li>Small</li>
      <label>
        <input type="checkbox" ng-model="selected_input.checked">
      </label>

      <li>Medium</li>
      <label>
        <input type="checkbox" ng-model="selected_input.checked">
      </label>
    </ul>
    <button ng-click="add()">Add</button><br>
    <br>

输入新的比萨饼名称：
选择尺寸标签：

小的
中等

添加

您的项目出现了一些问题

您加载了两次ng控制器。转到body标记并删除ng控制器属性

你的add函数完全搞砸了，我把它改成了现在可以用的东西，如果你在评论中有具体的问题，我不会解释每一行代码

您的复选框具有相同的ng模型，这就是它们一起选中和不选中的原因

新控制器

$scope.newName = "";

$scope.pizzaOrder;

 $scope.customerList=[
 {name: 'mushroom', types: ['Small', 'Medium']}];

 $scope.selected_input = {small: true, medium: false};

 $scope.add = function() {
    var typesToPush = [];
    if($scope.selected_input.small)
        typesToPush.push('small');
    if($scope.selected_input.medium)
        typesToPush.push('medium');
    $scope.customerList.push({name: $scope.newName, types: typesToPush});
    console.log("Updated customerList: ");
    console.log($scope.customerList);
  };

按F12并查看控制台，以查看customerList是否已相应更新

新建index.html

<body>
    <ion-view view-title="Welcome">
  <ion-content ng-controller="pizzaShop">
    <h3> Welcome </h3>
    {{sample}}
    Enter the new Pizza Name:
    <input type="text" ng-model="newName">
    Select size availabel:
    <ul>
      <li>Small</li>
      <label>
        <input type="checkbox" ng-model="selected_input.small">
      </label>

      <li>Medium</li>
      <label>
        <input type="checkbox" ng-model="selected_input.medium">
      </label>
    </ul>
    <button ng-click="add()">Add</button><br>
    <br>
    Make:

      <select ng-model="pizzaOrder" ng-options="order.name for order in customerList"></select><br>
     Type:
    <ion-checkbox ng-model="cartype" ng-repeat="sizeType in pizzaOrder.types" ng-disabled="!pizzaOrder">
    <span>{{sizeType}}</span>
    </ion-checkbox><br><br>
    <button ng-click="addEntry()">Edit</button>
    <button ng-click="home()">Back</button>
  </ion-content>
</ion-view>
  </body>


欢迎
{{sample}}
输入新的比萨饼名称：
选择尺寸标签：

小的
中等

添加



制作：


类型：
{{sizeType}}



编辑
返回

GL.

该解决方案解决了您的问题吗？@LironIlayev实际上它没有添加到客户列表中。所以我想弄明白。你能在plnkr中发布工作代码吗？我不确定更改是否出现在你的屏幕上，因此如果他们没有进入此链接：@LironIlayev我刚才在plnkr中检查了代码。当输入给它时，它会显示比萨饼的名称，但比萨饼的大小没有列出。我很想编辑它，但没有任何效果。你能帮我做这个@LironIlayev吗