This is an idea. There are too many variable factors in reality, so it’s hard to go into details one by one. The key points to consider when dealing with similar problems are pretty much the following:
Because I want to generate an undefined number and content of HTML elements, I need a (two-way bound) collection to hold them
At the same time, I need an object to save the item currently being created, and a method to save the item into the collection and then reset it
2.1 Of course, I don’t need an object, but capture the value of input when added, but this is not the way of writing in angular, this is the way of writing in jQuery
What I can determine is what tags to use and what events to bind, so these things can be written in the template and generated with the collection traversal in 1.
The most disgusting thing about the above example is that it uses $event 的对象,因为它使得我必须在 controller to mix in code related to DOM or Event instead of business logic. Of course there are many solutions, such as:
4.1 On the basis of 2, I do not simply use a string to save the text content of the li item, but use an object. For example listItem.text 保存文字内容,然后在添加的时候给它生成一个递增的 listItem.id。这样做有很多好处,比如说 ng-repeat 的时候可以 track by,控制模版输出也会更灵活,绑定的事件处理方法可以不传 $event 而是传 item 或 item.id you can wait
4.2 However, if the bound event processing method needs to operate the DOM, it is best to write it as a directive, and the data (collection of list items) can still be kept in the controller
For dynamically inserted HTML, which contains ng parameters, angularjs generally does not parse it twice.
You can use dependency injection to call $compile to rewrite and compile local code.
In fact, this is a problem that may become very complicated. In reality, there are many solutions. I will write you the simplest reference:
Then in the corresponding template:
This is an idea. There are too many variable factors in reality, so it’s hard to go into details one by one. The key points to consider when dealing with similar problems are pretty much the following:
2.1 Of course, I don’t need an object, but capture the value of
input
when added, but this is not the way of writing in angular, this is the way of writing in jQuery$event
的对象,因为它使得我必须在controller
to mix in code related to DOM or Event instead of business logic. Of course there are many solutions, such as:4.1 On the basis of 2, I do not simply use a string to save the text content of the li item, but use an object. For example
listItem.text
保存文字内容,然后在添加的时候给它生成一个递增的listItem.id
。这样做有很多好处,比如说ng-repeat
的时候可以track by
,控制模版输出也会更灵活,绑定的事件处理方法可以不传$event
而是传item
或item.id
you can wait4.2 However, if the bound event processing method needs to operate the DOM, it is best to write it as a directive, and the data (collection of list items) can still be kept in the controller
For dynamically inserted HTML, which contains ng parameters, angularjs generally does not parse it twice.

You can use dependency injection to call $compile to rewrite and compile local code.