如何在Angular菜单中添加复选框？附现有WorkerMenu代码示例

Got it! Let's get those checkboxes added to your worker menu. Since you're using AngularJS, we'll need to adjust both your controller data and the template that renders the menu to make this work smoothly.

Step 1: Update Menu Data with Checkbox State Tracking #

First, we'll add an isChecked property to each menu item to keep track of whether the checkbox is selected. This lets AngularJS bind the checkbox state directly to your menu data.

Here's the updated controller code:

$scope.workerMenu = [
  { 
    description: vocabulary.scope.worker.header.menu.apples, 
    action: function () { displayWorkerProfile(); },
    isChecked: false // Tracks checkbox selection state
  }, 
  { 
    description: vocabulary.scope.worker.header.menu.oranges, 
    action: function () { validateDeletion(); },
    isChecked: false // Tracks checkbox selection state
  }
];

Step 2: Modify the HTML Template to Render Checkboxes #

Next, we'll update your menu template to include checkboxes alongside each menu item. We'll use AngularJS's ng-repeat to loop through the menu, ng-model to bind the checkbox state, and associate the checkbox with its label for better usability.

Assuming your original template used an unordered list, here's the updated version:

<ul class="worker-menu">
  <li ng-repeat="item in workerMenu">
    <!-- Checkbox bound to the item's isChecked property -->
    <input type="checkbox" ng-model="item.isChecked" id="menu-item-{{$index}}">
    <!-- Label that triggers the menu action and toggles the checkbox -->
    <label for="menu-item-{{$index}}" ng-click="item.action()">
      {{item.description}}
    </label>
  </li>
</ul>

Optional: Access Checkbox State in Your Action Functions #

If you need to use the checkbox's selected state inside your displayWorkerProfile or validateDeletion functions, you can modify the action to pass the menu item as a parameter.

Update the menu data to include the item parameter:

$scope.workerMenu = [
  { 
    description: vocabulary.scope.worker.header.menu.apples, 
    action: function (item) { displayWorkerProfile(item); }, // Pass item to action
    isChecked: false
  }, 
  { 
    description: vocabulary.scope.worker.header.menu.oranges, 
    action: function (item) { validateDeletion(item); }, // Pass item to action
    isChecked: false
  }
];

Then update the template to pass the item when clicking:

<label for="menu-item-{{$index}}" ng-click="item.action(item)">
  {{item.description}}
</label>

Now you can access the checkbox state in your functions:

function displayWorkerProfile(item) {
  if (item.isChecked) {
    // Do something if the checkbox is selected
    console.log("Apple menu item is checked!");
  }
  // Existing profile display logic here
}

内容的提问来源于stack exchange，提问作者Priya