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

For project development needs, the business logic to be implemented is: Drugstore side click to view the "shipped" "received" Order details. Only the "Cancel" button should appear in the module pop-up box. But the reality of the situation is for example with what is seen.

Modal box core code such as the following:

< 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 corresponding component "confirm delivery" "brutal reject", and after getting a test in its controller, always show that its value is null.

Get statements such as the following:

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;

After running the results for example as seen in:

So is it possible to get the ID of its internal components further? Continue to try for example the following:

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

The result is an error. For example, see the following:

Learn the lessons from the previous QR code by adding the following statements to their corresponding HTML pages:

<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.

maybe work.

Once you get to the modal box component ID, you need to implement the requirements.

The hidden method for the component itself is complete.

For example, see the following:

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 DOM operation allows you to get the ID name and so on. For example, see the following:

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

It is impossible to fuss over the view. Still need to change the idea.

Sometimes the inspiration is coming so suddenly. Just like happiness. consider whether to start in 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. Then you can control the loading of different modal boxes through the IF statement in the controller. Then you need to add a new modal frame to the modal box. Added modal box contents such as the following:

< 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 differences are: The ID of the modal box, the control button. In the controller, its if control statement such as the following:

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 Run modal box pops up modalinstance = $modal. Open ({// Start running controller billdtlpopctrltemplateurl: ' billdtlcontent1.html ',//The address of the modal form, point to the created View controller: ' Billdtlpopctrl ',//Initialize modal range , initializes the $scope for the controller specified by the $modal. The controller can inject resolve with $modalinstance: {//define a member and pass him to the controller specified by $modal, which is equivalent to a Reslove property of routes, assuming that a Objec object needs to be passed. Need to use Angular.copy () items:function () {return $scope. Items;}}); }else{//after the pharmacy order query succeeds, the callback Run modal box pops up modalinstance = $modal. Open ({//start running controller billdtlpopctrltemplateurl: ' billdtlcontent.html ',///The address of the modal form, point to the created View controller: ' Billdtlpopctrl ',//Initialize the modal range, $modal the specified controller, initialize $scope, the controller can be $modalinstance injected resolve : {//defines a member and passes him to the controller specified by $modal. Equivalent to a Reslove property of routes. Suppose you need to pass a Objec object. Need to use Angular.copy () items:function () {return $scope. Items;}});}

References

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