Angularjs Advanced (31) ANGULARJS project development techniques get the component ID in the modal dialog box

ANGULARJS project development techniques get the component ID requirements in the modal dialog box

The business logic that needs to be implemented for the purpose of the project development is: Drugstore side when you click on the "Shipped" "received" order details, only the "Cancel" button should appear in the module pop-up box. But the reality of the situation is as shown.

Modal box core code is as follows:

< Script type="Text/ng-template" id="billdtlcontent.html">

<div class= "Modal-header" >

</div>

<div class= "Modal-body" id= "Modal-body" >

<table border= "1" class= "Table table-bordered" >

<tr>

<td>

<div>

<label for= "billID" > Order number:</label>

<input ng-model= "billID" id= "billID" type= "text" disabled/>

</div>

</td>

</tr>

...................................................

...................................................

<td>

<div>

<label for= "Merch_name" > Distribution pharmacy:</label>

<input ng-model= "Merch_name" id= "Merch_name" type= "text" disabled/>

</div>

</td>

</tr>

</table>

</div>

<div class= "Modal-footer" id= "Modal-footer" >

<button id= "OK" class= "btn btn-primary btn-lg" type= "button" ng-click= "OK ()" > Confirm shipping </button>

<button id= "Reject" class= "btn btn-danger btn-lg" type= "button" ng-click= "Reject ()" > Brutal rejection </button>

<button id= "Cancel" class= "btn btn-warning btn-lg" type= "button" ng-click= "Cancel ()" > Cancel </button>

</div>

</ Script >

Because the implementation code of the modal box is in the JS script. Consider using the Get component ID to get the ID of the component "confirm delivery", "brutal rejection", and after getting the test in its controller, always show its value is null. The Get statement is as follows:

Console.log ("Ltt_sunny:"); Console.log (Instance.bill_status_code); if (Instance.bill_status_code = = = ' 1 ' | | Instance.bill_status_code = = ' 2 ') {alert ("Shq:" + document.getElementById ("reject"));}

After further reading the code, it is found that the ID of the modal box component can be obtained first, i.e. the following statement is implemented:

document.getElementById ("billdtlcontent.html"). InnerHTML;

The results of the execution are as follows:

So is it possible to get the ID of its internal component further? Continue to try as follows:

document.getElementById ("billdtlcontent.html"). Innerhtml.getelementbyid ("reject"));

The result is an error, as follows:

Learn from the previous QR code and add the following statement to its corresponding HTML page:

<i id= "Sunny" hidden= "hidden" ></i>
The statements in the Controller are as follows:

document.getElementById ("Sunny"). InnerHTML = Htmlcontent;alert ("Shq:" + document.getElementById ("Sunny"). InnerHTML Alert ("Shq:" + document.getElementById ("reject"));

The result gets the ID of the corresponding component.

Summarize

Sometimes a problem can not be solved, you should try to solve by other means. As in this article, since the direct fetch cannot get the ID of the component in the JS script, I try to put the retrieved page content again into the original page and then get it again through the DOM operation.

Follow-up work

Once you get to the modal box component ID, you need to implement the requirements. The hidden method for the component itself has been completed. As shown below:

Control hides control function Displayhideui (object) {var UI = object; Ui.style.display = "None";}/Control Display control function Displayui ( Object) {var UI = object; ui.style.display = "Inline-block";}

The control settings method called in the controller did not see the effect.

Displayhideui (document.getElementById ("reject"));

The name of the ID, and so on, can be obtained by manipulating the DOM. As shown below:

Alert ("SHQ:" + document.getElementById ("reject"). Attributes[0].value);

It is impossible to make a fuss in view, or to change the idea. Sometimes the inspiration is coming so suddenly, just like happiness. consider whether you want to start with the controller or read the code to see if you can achieve this effect in the form of If_else. Ng-if is not considered, because the general if statement is sufficient to solve the problem. Since the modal box is loaded according to its ID value, it is possible to load different modal boxes in the controller with the IF statement control. Then you need to add the new modal box content to the modal box. The contents of the modal box added are as follows:

< Script type="Text/ng-template" id="billdtlcontent1.html">

<div class= "Modal-header" >

</div>

<div class= "Modal-body" id= "Modal-body" >

<table border= "1" class= "Table table-bordered" >

<tr>

<td>

<div>

<label for= "billID" > Order number:</label>

<input ng-model= "billID" id= "billID" type= "text" disabled/>

</div>

</td>

</tr>

............................

...................................

<tr>

<td>

<div>

<label for= "Merch_name" > Distribution pharmacy:</label>

<input ng-model= "Merch_name" id= "Merch_name" type= "text" disabled/>

</div>

</td>

</tr>

</table>

</div>

<div class= "Modal-footer" id= "Modal-footer" >

<button id= "Cancel_sunny" class= "btn btn-warning btn-lg" type= "button" ng-click= "Cancel ()" > Cancel </button>

</div>

</ Script >

Please note that the above two modal boxes are different, the main difference is: The ID of the modal box, the control button. In the controller, its if control statement is as follows:

Console.log ("Ltt_sunny:"); Console.log (Instance.bill_status_code); if (Instance.bill_status_code = = = ' 1 ' | | Instance.bill_status_code = = ' 2 ') {//After the pharmacy order query succeeds, the callback Execution modal box pops up modalinstance = $modal. Open ({// Start execution controller billdtlpopctrltemplateurl: ' billdtlcontent1.html ',//The address of the modal window, point to the created View controller: ' Billdtlpopctrl ',//Initialize modal range , initializes the $scope for the controller specified by the $modal, which can be $modalinstance injected resolve: {//define a member and pass it to the $modal specified controller, which is equivalent to a routes property of Reslove, If you need to pass a Objec object, you need to use Angular.copy () items:function () {return $scope. Items;}}); }else{//after the pharmacy order query succeeds, the callback Execution modal box pops up modalinstance = $modal. Open ({//Start execution controller billdtlpopctrltemplateurl: ' billdtlcontent.html ',///The address of the modal window, point to the created View controller: ' Billdtlpopctrl ',//Initialize the modal range for $modal specified controller, initialize $scope, the controller can be $modalinstance injected resolve : {//define a member and pass it to the controller specified by $modal, equivalent to a Reslove property of routes, if a Objec object needs to be passed, use Angular.copy () items:function () {return $ Scope.items;}});}

Reference documents

Http://www.w3school.com.cn/jsref/dom_obj_attributes.asp

American and American Pictures

Angularjs Advanced (31) ANGULARJS project development techniques get the component ID in the modal dialog box