假设有一个文本输入字段,用户将在其中输入 ID。之后,用户将能够单击“添加”按钮进行确认。单击该按钮后,我想向我的服务器发送发送请求并获取“名称”。然后我想禁用文本输入字段,隐藏“添加”按钮并在“添加”按钮曾经所在的位置显示一个数字输入字段。
我将如何以 Angular 的方式构建它?我刚刚开始使用 Angular 并且对这些概念有点熟悉,但是我很难以正确的方式思考这个问题。
假设有一个文本输入字段,用户将在其中输入 ID。之后,用户将能够单击“添加”按钮进行确认。单击该按钮后,我想向我的服务器发送发送请求并获取“名称”。然后我想禁用文本输入字段,隐藏“添加”按钮并在“添加”按钮曾经所在的位置显示一个数字输入字段。
我将如何以 Angular 的方式构建它?我刚刚开始使用 Angular 并且对这些概念有点熟悉,但是我很难以正确的方式思考这个问题。
You should use ng-show, ng-hide, ng-disabled and ng-click to do this.
The thing you must remember is that you shouldn't edit the DOM directly in your controller. You should use existing directives or create your own directives. In this case, all you need already exist.
You should do something like this :
<input type="text" ng-model="textValue" ng-disabled="numberValue">
<button ng-hide="numberValue" ng-click="sendData">Send</button>
<input type="number" ng-model="numberValue" ng-show="numberValue">
In your controller, you will call your server in the sendData method and assign the result to the numberData property. If you want to disable the button while loading the data, you can add a second property that will be set to true when your start the call to your server and set to false in the callback method of your request. You then add an ng-disabled on that property for the button.