Create an Angular JS directive that allows for two input fields to dynamically update the view

Hey there, I'm facing a problem,

I've developed a dual input directive and need some assistance with the following issue. When I change the model value to undefined in the controller, the view values are not cleared. Here are the code snippets:

Here is my Dual Input Directive implementation:

angular.module("awcQuoteBuy.directives")
  .directive('dualInput', function($timeout, inputValidationService) {
    return {
      restrict: 'E',
      templateUrl: 'app/partials/common/doubleInput.html',
      scope: {
        modelValue: '=',
        size: '@',
        fieldError: '@',
        blurFn: '&loseFocus'
      },
     ...

The corresponding HTML snippet:

<dual-input model-value="dualInput[$index]" ng-switch-when="DUAL_NUMBER" size="{{q.length}}" 
              field-error="{{q.invalid || (nextClicked && !validateGeneralQuestion(acc.memberId, q))}}" id="{{'gQDual'+$index}}"
              lose-focus="saveGeneralAnswer(acc.memberId, q)"></dual-input>

When I set the scope value to undefined or null in my Controller, the entered values in the view are not cleared. Can you guide me on how to resolve this issue?

$scope.dualInput[$index]=undefined;

Answer №1

This particular directive comes equipped with an automatic initialization feature. This meant that I had to trigger the re-rendering of the directive every time I needed to reinitialize it.

To manually update the user control, you can use ctrl.$setViewvalue = ""

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can Node.js fetch a PHP file using AJAX?

The Challenge: Greetings, I am facing an issue with my website that features a game created using node.js, gulp, and socket.io. The problem arises when I attempt to call a php file from node.js. While the file returns a success message (echo in the file) ...

Send information using AJAX within a .NET integrated browser

In our current setup, we utilize a .NET embedded browser to showcase an HTML page that is generated by applying an XSLT file to an XML file using .NET. This process results in HTML content displayed within the embedded browser through the DocumentText prop ...

Turn off Drag and Drop Feature for jQuery File Upload

Currently, I have implemented an ajax file uploader on my website using the following plugin: https://github.com/blueimp/jQuery-File-Upload On one of my pages, there are two controls for uploading files - one for images and another for documents. Both con ...

What is the process for inserting additional information into a geoJson file?

In the "gj" object, I need to add new properties from the "dataToAdd" array. The current format of "gj" is as follows: const gj = { "type": "FeatureCollection", "features" : [ { "type": "Feature", "geometry": { ...

Prevent displaying page confirmation prompts when a user clicks on hyperlinks

One way to display a confirmation message when a user tries to leave the current page is by using this method: window.addEventListener("beforeunload", function (e) { var confirmationMessage = "Are you sure you want to leave?"; ...

The UI-router activates the child state prior to resolving the parent state

Currently, I am encountering an issue with executing initialization code within a parent state of the Angular ui-router. The initialization code in question is orderService.getStoreInfo(), which returns a promise. My intention is to trigger the child state ...

When attempting to call a recursive method in Vue with a changing `this` object, an error is thrown: "RangeError: Maximum call stack size exceeded"

Update integrate codePen into the project. https://codepen.io/jiaxi0331/pen/xxVZBMz Description encountered an issue while trying to call the parent method recursively Code export default { methods: { dispatch(componentName, event, value) { ...

In the setup function, the composition API calculates the return value of the computed property before it is

I am currently working on editing a post using the state manager Vuex in Vue3 with Composition API. Below is the code I have implemented: <template> <div class="container py-5"> <h3 class="mb-5 border-top-0 border-start- ...

What Causes the "Do Not Push Route with Duplicated Key" Error in React Native with Redux?

I have successfully integrated Redux into my React Native project, specifically for navigation purposes. Below is the code snippet from my navigation reducer file (navReducer.js): import { PUSH_ROUTE, POP_ROUTE } from '../Constants/ActionTypes' ...

Angular post request does not update the table

After displaying a table and a form on a page, I encountered an issue where the table does not update with new data when submitting the form. Even after refreshing the page, the new data is not reflected. As a newbie to Angular, I'm unsure of what exa ...

Is it possible to generate a JSON file from a flowchart with the help of d3.js?

Situation: I'm currently in the process of developing a tool that will enable us to generate flow charts and then export the data into a JSON file for use in other services. Being new to JavaScript, I've come across d3 quite often. Can d3 handle ...

Issue: Unhandled promise rejection: BraintreeError: The 'authorization' parameter is mandatory for creating a client

I'm currently working on integrating Braintree using Angular with asp.net core. However, I've encountered an issue that I can't seem to solve. I'm following this article. The version of Angular I'm using is 14, and I have replicate ...

Unable to maintain active status on Vuejs (PrimeVue) Sidebar component leads to malfunction

I currently have a PrimeVue Sidebar component set up with a dynamic component being passed to it. At the moment, I am only using a single component to test this functionality. <Sidebar v-model:visible="sidebarState" :baseZIndex="1000" ...

ensure that html tags display properly when retrieved from json in an angular directive template

Trying to embed ruby tags in a directive template but struggling with escaping them. Despite reading about $sce and filters, the confusion deepens as browser tabs multiply. The directive code is as follows: angular.module("ngFlashCard", ["ngSanitize"]).d ...

Guide on transforming a text element into an input field when clicked using AngularJS

I'm curious about how to achieve this functionality using AngularJS. Specifically, I'd like to display a list of keywords with an edit button next to each one. <tr ng-repeat="keyword in keywords"> <td> <st ...

The process of incorporating a function into a website's source code using a web driver

In the source code, there is a button with an onclick event to change the paragraph content. However, the code provided does not seem to be functioning properly. ((JavascriptExecutor) this) .executeScript("function test123() { y=docume ...

A Guide to Executing Asynchronous Function Calls in a For Loop using JavaScript

Experiencing issues with asynchronous calls within a for loop in my code. The loop progresses before the async call is completed, causing unexpected behavior. As someone new to this language, I'm trying to understand callbacks and other related concep ...

What are some effective ways to utilize a marquee?

I am looking for a way to duplicate the <a> tag within a DIV named box so that the text is displayed on a continuous line marquee without any breaks. As I am new here, please feel free to ask for more information in the comments. Thank you. $(&apo ...

Enhance the functionality of Jquery UI drag and drop to be responsive even when in a zoom

I came across this drag and drop demo for Jquery UI that was working perfectly at a regular zoom level. However, when I zoomed out to 50%, things started acting strange. Can anyone provide suggestions on how to fix the demo? Link to Demo Any help would be ...

AngularJS class directive is utilized to bind click event to an external component, specifically the Kedno UI grid

I'm attempting to utilize a class directive in order to add a click event to the next page button on the Kendo grid. Here's the Directive: .directive('kPagerNav', function () { return { restrict: 'C', ...